CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Sanchit Gupta
Sanchit Gupta

Reputation: 87

checkbox enable disable based on dropdown option

I have created a dropdown and few checkboxes. checkboxes enable and disable based on dropdown option selected.

Here is the code:

<select id="Objective" form="theForm" name="category" >
    <option value="pi">Pipi</option>
    <option value="theta">thethaatha</option>
    <option value="sigma">sigmama</option>
</select>
<div>
    <input type="checkbox" class="dissable" onclick="check();" value="1" /> Teas<br>
    <input type="checkbox" class="dissable" onclick="check();" value="1" /> Capri<br>
    <input type="checkbox" class="dissable" onclick="check();" value="2" /> Kids <br>
    <input type="checkbox" class="dissable" onclick="check();" value="2" /> Food <br>
</div>

<script>
$("#Objective").on("change", function () {
    if ($(this).val() == "theta") {
        $(".dissable[value='1']").prop("disabled", true);
    } else if ($(this).val() == "pi") {
        $(".dissable[value='2']").prop("disabled", true);
    } else {
        //donothing
    }
}).trigger('change');
</script>

whenever I choose pi from dropdown it goes fine both value = "2" kids and food gets disabled but when i choose theta from every checkbox gets disabled which should not be like this. only value ="1" should get disabled i.e., teas and capri.

Help correcting it whats the problem with code. thanks in advance.

Upvotes: 1

Views: 2735

Answers (2)

Asons
Asons

Reputation: 87191

You need to undo between each select change so the disabled one's get enabled again, so if you add these 2 lines in the function beginning it will work

    $(".dissable[value='1']").prop("disabled", true);
    $(".dissable[value='2']").prop("disabled", true);

Side note, as "Ezequias Dinella" shows in his answer, to enable/disable all you can also remove the attribute, like this $(".dissable").prop("disabled", true);

Sample

$("#Objective").on("change", function () {
    $(".dissable[value='1']").prop("disabled", false);
    $(".dissable[value='2']").prop("disabled", false);
  
    if ($(this).val() == "theta") {
        $(".dissable[value='1']").prop("disabled", true);
    } else if ($(this).val() == "pi") {
        $(".dissable[value='2']").prop("disabled", true);
    } else {
        //donothing
        $(".dissable[value='1']").prop("disabled", true);
        $(".dissable[value='2']").prop("disabled", true);
    }
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Objective" form="theForm" name="category" >
    <option value="pi">Pipi</option>
    <option value="theta">thethaatha</option>
    <option value="sigma">sigmama</option>
</select>
<div>
<input type="checkbox" class="dissable" onclick="check();" value="1" /> Teas<br>
<input type="checkbox" class="dissable" onclick="check();" value="1" /> Capri<br>
<input type="checkbox" class="dissable" onclick="check();" value="2" /> Kids <br>
<input type="checkbox" class="dissable" onclick="check();" value="2" /> Food <br>
</div>

Upvotes: 1

Ezequias Dinella
Ezequias Dinella

Reputation: 1306

An easy way to do it, is enabling all checkboxes before disabling choosed ones, in order to ensure that only those you want are disabled;

// enable all checkboxes
$(".dissable").prop("disabled", false);

and then you can disable choosed ones:

// disabling some of them
$(".dissable[value='1']").prop("disabled", true);

Working example: http://codepen.io/anon/pen/bwJaEp?editors=1010

Upvotes: 1

Related Questions