在选中的复选框上启用下拉菜单不起作用...下拉菜单未启用

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

 $(function(){

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

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

<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>

编辑根据您的评论，您正在使用 bootstrap multiselect 因此您需要启用和禁用 multiselect 属性 chcgae 您的代码如下：

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

Answer 3

使用 $("#occupation").attr("disabled", "true");在其他块中

<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

If you want to remove selected value at the time of uncheck checkbox, you can use this:

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

<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>

在选中的复选框上启用下拉菜单不起作用...下拉菜单未启用

enable dropdown on checkbox checked not working... Dropdown is not getting enabled

javascript

php

jquery

twitter-bootstrap

isenabled