Disable checkbox according to the selected option (jquery)

Question

I am writing a jquery code which aim is to disable/enable group of checkboxes. So far I got: Html:

<select id="Units"> <option value="Marketing" > Marketing </option> <option value="Finance" > Finance </option> <option value="Operations" > Operations </option> </select> <input type="checkbox" class="enable" 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="enable" onclick="check();" value="4"> chbx4

JS

$("#Units").on("change", function() { if ($(this).val() !== "Finance") { $(".dissable").attr("disabled", "disabled"); } else { $(".dissable").removeAttr("disabled"); } });

But it doesn't work properly on the page load. Only after change the selected option the checkboxes react. How to improve this in order to catch selected value when the page is load and enabled/disabled checboxes with apropriate class?

Trigger the change event manually or set initial values in HTML — Vigneswaran Marimuthu
– Vigneswaran Marimuthu, Commented May 11, 2015 at 10:56

madalinivascu · Accepted Answer · 2015-05-11 11:13:23Z

$(".dissable").attr("disabled", "disabled"); $("#Units").on("change", function() { if ($(this).val() !== "Finance") { $(".dissable").attr("disabled", "disabled"); } else { $(".dissable").removeAttr("disabled"); } });

demo: http://jsfiddle.net/zgn2o40a/1/

Milind Anantwar · Accepted Answer · 2015-05-11 10:55:32Z

You can trigger the change event after defining the event using .change() or .trigger('change'):

$("#Units").on("change", function() { //rest code }).change();

Working Demo

Tushar · Accepted Answer · 2015-05-11 10:56:27Z

Try this:

$("#Units").on("change", function () { if ($(this).val() !== "Finance") { $(".dissable").prop("disabled", true); // Use prop instead of attr } else { $(".dissable").prop("disabled", false); } }).trigger('change'); // ^ // This will call function immedietly

Your code will attach undefined listener to change event

Collectives™ on Stack Overflow

Disable checkbox according to the selected option (jquery)

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related