select 下拉框不可选中

你的名字 2022-12-25 14:53 302阅读 0赞

### select 下拉框不可选中 ###

*  disabled属性
 *   *  定义和用法
     *  浏览器支持
     *  实例
 *  业务应用
 *   *  移除disabled属性

# disabled属性 #

## 定义和用法 ##

disabled 属性规定禁用下拉列表。被禁用的下拉列表既不可用，也不可点击。

可以设置 disabled 属性，直到满足某些条件（比如选择一个复选框），才恢复用户对该下拉列表的使用。然后，可以使用 JavaScript 来清除 disabled 属性，以使下拉列表变为可用状态。

## 浏览器支持 ##

所有浏览器都支持 disabled 属性。

## 实例 ##

<select disabled="disabled">
      <option value ="volvo">Volvo</option>
      <option value ="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>

# 业务应用 #

<div class="form-group">
    				<label class="col-sm-3 control-label">计划包含知识点：</label>
    				<div class="col-sm-8">
    					<select th:if="${detailPlan.isPublish} == 1" disabled="disabled" id="detailPlanKpIds" name="detailPlanKpIds" class="form-control select2-multiple" multiple>
    						<option th:each="kp:${kps}" th:value="${kp.kpId}" th:text="${kp.kpName}" th:selected="${detailPlan.detailPlanKpIds?.contains(kp.kpId)}"></option>
    					</select>
    					<select th:if="${detailPlan.isPublish} == 0" id="detailPlanKpIds" name="detailPlanKpIds" class="form-control select2-multiple" multiple>
    						<option th:each="kp:${kps}" th:value="${kp.kpId}" th:text="${kp.kpName}" th:selected="${detailPlan.detailPlanKpIds?.contains(kp.kpId)}"></option>
    					</select>
    				</div>
    			</div>

当isPublish=1 时不可编辑select  
使用disabled属性的select框值不能向后台传递，如果需要在页面展示时禁用select选择属性，但是提交数据时又需要提交select属性值，此时需要在提交之前移除disabled属性

## 移除disabled属性 ##

function submitHandler() {
    	        if ($.validate.form()) {
    	            $("#detailPlanKpIds").removeAttrs("disabled");
    	            $.operate.save(prefix + "/edit", $('#form-detailPlan-edit').serialize());
    	        }
    	    }