Question

我正在尝试在选中复选框时启用下拉列表。但是当我这样做的时候......它没有用。请帮帮我。 HTML：

              <label class="checkbox-inline">
                <input type="checkbox" value="" id="onstage">On Stage
              </label>


                      <div class="col-md-9">
                       <select name="occupation" id="occupation" multiple="multiple" disabled="disabled">
                        <option value="Actor">Actor</option>
                        <option value="Supervisor">Supervisor</option>
                        <option value="Extra">Extra</option>
                    </select>

JQuery：

<script type="text/javascript">
 $(function(){

            $("#onstage").click(function(){

                if($(this).is(":checked")){
                    $("#occupation").removeAttr("disabled");
                    $("#occupation").focus();
                } else {
                    $("#occupation").attr("disabled", "disabled");
                }
            });
        });
    </script>

Answer 1

您应该使用prop代替attr来设置disabled属性if you're using jQuery 1.6+。您也可以像这样简化代码：

$("#onstage").change(function(){
   $("#occupation").prop("disabled", !$(this).is(":checked"));

    if($(this).is(":checked")){
        $("#occupation").focus();
    }
});

Answer 2

如果您使用的是jquery 3.2.1，那么您的代码必须正常工作。

检查一次

1）您在其他js代码中没有错误（检查控制台是否有错误）

2）确保ID必须是唯一的，因此您必须在文档中只有onstage和occupation

＆＃13;

 $(function(){

            $("#onstage").click(function(){

                if($(this).is(":checked")){
                    $("#occupation").removeAttr("disabled");
                    $("#occupation").focus();
                } else {
                    $("#occupation").attr("disabled", "disabled");
                }
            });
        });

＆＃13;

<label class="checkbox-inline">
  <input type="checkbox" value="" id="onstage">On Stage
</label>


<div class="col-md-9">
 <select name="occupation" id="occupation" multiple="multiple" disabled="disabled">
  <option value="Actor">Actor</option>
  <option value="Supervisor">Supervisor</option>
  <option value="Extra">Extra</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

＆＃13;

编辑根据您使用的评论bootstrap multiselect所以您需要启用和禁用multiselect属性chcgae这样的代码：

$("#onstage").click(function(){
 if($(this).is(":checked")){
         $("#occupation").multiselect('enable');                    
 } else {
         $("#occupation").multiselect('disable');
 }
});

Answer 3

使用$（＆＃34;＃职业＆＃34;）。attr（＆＃34;禁用＆＃34;，＆＃34; true＆＃34;）;在else块中

<script type="text/javascript">
 $(function(){

            $("#onstage").click(function(){debugger;

                if($(this).is(":checked")){
                    $("#occupation").removeAttr("disabled");
                    $("#occupation").focus();
                } else {
                    $("#occupation").attr("disabled", "true");
                }
            });
        });
    </script>

Answer 4

如果要取消选中复选框时删除所选值，可以使用：

＆＃13;

$("#onstage").click(function(){
   $("#occupation").prop("disabled", !$(this).is(":checked")).val('');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline">
    <input type="checkbox" value="" id="onstage"/> On Stage
</label>
<div class="col-md-9">
    <select name="occupation" id="occupation" multiple="multiple" disabled="disabled">
        <option value="Actor">Actor</option>
        <option value="Supervisor">Supervisor</option>
        <option value="Extra">Extra</option>
    </select>
</div>

＆＃13;

启用下拉菜单复选框选中不起作用...下拉列表未启用

4 个答案: