checkbox enable disable based on dropdown option

Question

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.

Possible duplicate of Disable/enable checkboxes based on its values and selected option — Heretic Monkey
– Heretic Monkey, Commented Oct 26, 2016 at 18:22

Ezequias Dinella · Accepted Answer · 2016-10-26 18:24:01Z

1

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

answered Oct 26, 2016 at 18:24

Ezequias Dinella

1,3169 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Asons Over a year ago

plus 1 from me, I should have thought of removing the attribute when resetting the property

Asons · Accepted Answer · 2016-10-26 18:32:29Z

1

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>

edited Oct 26, 2016 at 18:32

answered Oct 26, 2016 at 18:12

Asons

87.7k12 gold badges119 silver badges175 bronze badges

7 Comments

Sanchit Gupta Over a year ago

hey it worked..programming is fun everytime. thanks a ton

Asons Over a year ago

@SanchitGupta It is fun :)

Sanchit Gupta Over a year ago

there is on problem that is still there

Sanchit Gupta Over a year ago

whenever user chooses sigmama all checkboxes should get disabled..this doesn't work as expected

Asons Over a year ago

@SanchitGupta That was unclear, is it says donothing in the script. Will update my answer in a sec.

|

Collectives™ on Stack Overflow

checkbox enable disable based on dropdown option

2 Answers 2

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related