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

Question

I am trying to enable dropdown when the checkbox is checked. But when I do so... It didn't working. Pls help me out here. 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

If you are using jquery 3.2.1 then your code must work.

Check once

1) You don't have error in other js code(check console for error)

2) Make sure id must be unique so you must have onstage and occupation only one time in document

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

EDIT as per your comment you are using bootstrap multiselect So you need to enable and disable multiselect attribute chcgae your code like this:

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

Answer 2

You should use prop instead of attr for setting disabled property, if you're using jQuery 1.6+. Also you can simplify your code like this:

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

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

Answer 3

Use $("#occupation").attr("disabled", "true"); in else block

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