select 下拉框不可选中

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


select 下拉框不可选中


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());
          }
      }


相关文章
|
6月前
|
前端开发
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
170 0
|
6月前
|
JavaScript
Element_select 选择器 选中框中显示不了选中的值
解决Vue中`el-select`选择器不显示选中值的问题:在`selectChanged`方法中添加`this.$forceUpdate()`,强制组件更新,使输入框显示选择的值。示例代码包括模板和方法。
914 2
|
4月前
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
53 1
|
6月前
下拉框
下拉框。
125 1
vxe-table可编辑状态默认显示下拉选select为默认展示
vxe-table可编辑状态默认显示下拉选select为默认展示
|
前端开发
select 下拉框不可选
select下拉框设置不可选
|
移动开发 HTML5
Element-ui中 选择器(select)多选下拉框实现全选功能
Element-ui中 选择器(select)多选下拉框实现全选功能
874 0
Element-ui中 选择器(select)多选下拉框实现全选功能
|
前端开发
Element-ui中 实现多选表格(Table)增加 ‘全选’ 字样
Element-ui中 实现多选表格(Table)增加 ‘全选’ 字样
1206 0
Element-ui中 实现多选表格(Table)增加 ‘全选’ 字样