0

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:

  • When I choose an option other then "Finance", checkbox no. 3 and 4 are disabled.
  • For "Finance", all checkboxes are enabled.

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

Satpal
  • 132,252
  • 13
  • 159
  • 168
arth81
  • 229
  • 5
  • 17
  • If you know how to use it, you could use [AngularJS](https://angularjs.org/) to do this. It will be a lot easier than what you want to do. – tektiv May 12 '15 at 07:39

3 Answers3

2

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

Satpal
  • 132,252
  • 13
  • 159
  • 168
  • Quite all right but when I choose Finance 1 and 2 are disable but all should be enable and for other then Finance 3 and 4 should be dissable. Changing the condition !== to === doesnt work. – arth81 May 12 '15 at 07:52
1

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/)
myfunkyside
  • 3,890
  • 1
  • 17
  • 32
  • Why not cache selectors ? , instead of calling `jQuery()` at each `change` event ? – guest271314 May 12 '15 at 12:06
  • In any other OOP language that wouldn't be such a bad thing, but because JS doesn't have classes, every variable outside of the function scope is a global variable, which you want as few as possible. – myfunkyside May 12 '15 at 13:02
  • _"every variable outside of the function scope is a global variable"_ ? Can define "global variable" ? Difference between "global" and "local" variable ? Would `var a = 1` be considered "global" ? – guest271314 May 12 '15 at 13:07
  • Search google please... [link1](http://www.w3schools.com/js/js_scope.asp),[link2](http://stackoverflow.com/questions/2613310/ive-heard-global-variables-are-bad-what-alternative-solution-should-i-use) – myfunkyside May 12 '15 at 15:11
  • Read links ? _"In HTML, the **global scope is the window object: All global variables belong to the window object.**"_ See http://stackoverflow.com/questions/11596315/what-is-the-standard-way-to-check-if-a-global-variable-exists . Can create jsfiddle http://jsfiddle.net where `variable` at http://stackoverflow.com/a/30184769/ returns `true` for `console.log(window[variable] !== undefined)` ? Which variable appear to be , there, "global" ? `disable` ? Should return `true` at `console.log(window[disable] !== undefined)` ?, correct ? – guest271314 May 12 '15 at 15:28
0

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
guest271314
  • 1
  • 15
  • 104
  • 177
  • @arth81 - I don't think this is very efficient, you'll be creating a new temporary array every time the handler is called, plus you create an extra variable to start with that you don't really need.. And what would you do if you wanted to disable two checkboxes that aren't next to eachother? If they are not next to eachother, you won't even be able to use the one line of `.slice(2, 4)` for both checkboxes, you'll need a separate line for every checkbox anyway. – myfunkyside May 12 '15 at 10:33
  • @myfunkyside _"creating a new temporary array every time the handler is called"_ ? Can indicate at `js` where _"a new temporary array"_ is created each time handler is called ? What is _"extra variable"_ ? Yes, slice utilized due to elements being adjacent to each other - for this reason. _"If they are not next to eachother, you won't even be able to use the one line ... for both checkboxes, you'll need a separate line for every checkbox"_ ? How was this conclusion reached ? – guest271314 May 12 '15 at 12:04
  • **(1)** When you `slice` the array stored in `var disable`, a new temporary array object is created. **(2)** `var disable` is that extra variable, extra in the sense that you don't need it. Also, it's global, which is not preferred practice in JS. **(3)** That what targeted at scalability; being able to use the solution in various scenarios or even in this scenario when you decide the first checkbox should be disabled too. You're right, your solution would not preclude a one-line solution, but that would undo the conciseness of your slice-method, and still create that temporary array. – myfunkyside May 12 '15 at 12:39
  • @myfunkyside That is not correct. 1) `.slice()` utilized at solution is a jQuery method . 2) `.disable` is _not_ any array, it is a jQuery object. The variable `disable` is not "extra" ; it is a cached selector. `disabled` is _not_ `global` . 3) To "undo" one concise process does not preclude implementation of another "concise" solution; that may be more concise than the initial attempt . There are no arrays within `js` at post; neither selector , nor cached selector , not method that would create an array. – guest271314 May 12 '15 at 12:49
  • @myfunkyside Can create jsfiddle http://jsfiddle.net which logs at `console` _"that temporary array."_ ? , and the "global" variable ? How was the variable `disabled` determined to be "global" ? – guest271314 May 12 '15 at 12:57
  • Example: http://jsfiddle.net/2sw3q8p4/1/. Explanation: http://www.w3schools.com/jsref/jsref_slice_array.asp – myfunkyside May 12 '15 at 13:16
  • @myfunkyside _"Example: http://jsfiddle.net/2sw3q8p4/1. Explanation: w3schools.com/jsref/jsref_slice_array.asp"_ What is logged to `console` at jsfiddle http://jsfiddle.net/2sw3q8p4/2/ are _not_ arrays; see `console` . They are jQuery objects . The link to w3schools is _not_ the method utilized at post, above. Did actually read http://stackoverflow.com/a/30184769/2801559 ? Including link posted at top of solution ? – guest271314 May 12 '15 at 13:29
  • @myfunkyside Can we agree that 1) `disabled` is _not_ an array ?,2) that no _"temporary array"_ is _"created"_ at http://stackoverflow.com/a/301847695/ ? – guest271314 May 12 '15 at 13:36
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/77623/discussion-between-guest271314-and-myfunkyside). – guest271314 May 12 '15 at 13:53