CODEWITHSUNDEEP
javascriptjquery
arth81
arth81

Reputation: 229

Disable/enable checkboxes based on its values and selected option

I need to hardcode those of the values of the checkboxes which are enabled/disabled, depending on the selected option value. I was trying to do something like this:

$("#Units").on("change", function () {
  if ($(this).val() !== "Finance") {
    $(".dissable").val("3").prop("disabled", true); 
    $(".dissable").val("4").prop("disabled", true); 
  } else {
    $(".dissable").val("3").prop("disabled", false);
    $(".dissable").val("4").prop("disabled", false);
  }
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="Units">
  <option value="Marketing" > Marketing </option>
  <option value="Finance" > Finance </option>
  <option value="Operations" > Operations </option>
</select>

<input type="checkbox" class="dissable" onclick="check();" value="1"> chbx1
<input type="checkbox" class="dissable" onclick="check();" value="2"> chbx2
<input type="checkbox" class="dissable" onclick="check();" value="3"> chbx3
<input type="checkbox" class="dissable" onclick="check();" value="4"> chbx4

But no desired effect, which is supposed to be like this:

I need to do this based on the checkbox values, not only class.

Upvotes: 0

Views: 3813

Answers (3)

myfunkyside
myfunkyside

Reputation: 3950

Use the following selector:

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

The [value='3'] creates a selection based on the value. See working example:

$("#Units").on("change", function () {
  if ($(this).val() !== "Finance") {
    $(".dissable[value='3']").prop("disabled", true); 
    $(".dissable[value='4']").prop("disabled", true); 
  } else {
    $(".dissable[value='3']").prop("disabled", false);
    $(".dissable[value='4']").prop("disabled", false);
  }
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="Units">
  <option value="Marketing" > Marketing </option>
  <option value="Finance" > Finance </option>
  <option value="Operations" > Operations </option>
</select>

<input type="checkbox" class="dissable" onclick="check();" value="1" /> chbx1
<input type="checkbox" class="dissable" onclick="check();" value="2" /> chbx2
<input type="checkbox" class="dissable" onclick="check();" value="3" /> chbx3
<input type="checkbox" class="dissable" onclick="check();" value="4" /> chbx4
(fiddle: http://jsfiddle.net/2sw3q8p4/)

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You need to filter check-boxes based on values so use $.fn.filter. Currently you are setting its value using $(".dissable").val("3")

Reduce the set of matched elements to those that match the selector or pass the function's test.

Code

$("#Units").on("change", function () {
    //Filter checkboxes whose value is 3 or 4
    $(".dissable").filter(function(){ 
        return $(this).val() == 3 || $(this).val() == 4;
    }).prop("disabled", $(this).val() == "Finance");  //disable or enable based on condition
}).trigger('change');

DEMO

Upvotes: 2

guest271314
guest271314

Reputation: 1

Try caching $(".dissable") , utilizing .slice() on cached selector

function check() {}

var disable = $(".dissable");

$("#Units").on("change", function() {
  if ($(this).val() !== "Finance") {
    // disable `.dissable` at index `2,` `3`
    disable.slice(2, 4).prop("disabled", true);
  } else {
    // enable `.dissable` at index `2,` `3`
    disable.slice(2, 4).prop("disabled", false);
  }
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<select id="Units">
  <option value="Marketing">Marketing</option>
  <option value="Finance">Finance</option>
  <option value="Operations">Operations</option>
</select>

<input type="checkbox" class="dissable" onclick="check();" value="1">chbx1
<input type="checkbox" class="dissable" onclick="check();" value="2">chbx2
<input type="checkbox" class="dissable" onclick="check();" value="3">chbx3
<input type="checkbox" class="dissable" onclick="check();" value="4">chbx4

Upvotes: 0

Related Questions