CODEWITHSUNDEEP
jquerycheckboxdropdown
Székely Tamás
Székely Tamás

Reputation: 91

Disable checkbox if value selected

I need a short jQuery code to do the following.

I got a dropdown like this:

<select id="pa_size">
    <option value="32cm">32 cm</option>
    <option value="52cm">52 cm</option>
</select>

And some other checkboxes under that dropdown.

Now my problem is: I want to disable the checkboxes IF the 52 cm option is selected. By default the checkboxes are enabled, and if returned to 32cm from 52cm it should be working again.

Upvotes: 1

Views: 2711

Answers (3)

athina
athina

Reputation: 94

Please see the following html code:

<select id="pa_size">
  <option value="32cm">32 cm</option>
  <option value="52cm">52 cm</option>
</select>
<input type="checkbox" class="todisable"  value="1"> chbx1
<input type="checkbox" class="todisable" value="2"> chbx2
<input type="checkbox" class="todisable" value="3"> chbx3

And also see the following javascript code:

$("#pa_size").on('change', function() {
  if ($(this).val() == "52cm") {
     $(".todisable").attr("disabled", "disabled");
  } else {
     $(".todisable").removeAttr("disabled");
  }
});

If you want to test it running on fiddle click here:

Upvotes: 0

Pardeep Pathania
Pardeep Pathania

Reputation: 1528

HTML 

<select id="worldSelect" class="select" name="world">
<option value="32cm">32 cm</option>
<option value="52cm">52 cm</option>
</select>
<input id="worldcb" type="checkbox" checked value="any" name="world">

Script

 $('#worldSelect').change(function () {
    $(':checkbox').prop('disabled', this.value == '52cm');
})

Upvotes: 3

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

You can use prop() method like following.

$('#pa_size').change(function () {
    $(':checkbox').prop('disabled', this.value == '52cm');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="pa_size">
    <option value="32cm">32 cm</option>
    <option value="52cm">52 cm</option>
</select>

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

Upvotes: 3

Related Questions