jquery value in dropdown selected disable checkbox

Question

I am trying to use jquery to disable a checkbox when the selected value of the dropdown menu is anything other than 0. My problem is when I select the item with the 0 value the checkbox is being disabled and to get the checkbox to disable I have to select at least two or more values before it will disbale the checkbox.

An example of my code is here:

example code at js fiddle

When the selected value is 0 I want the checkbox and drop down to be enabled and when the selected value is anything other than 0 I want to disable the checkbox. I also would like it to work whether I start from the first row, bottom, row, or middle row.

karim79 · Accepted Answer · 2011-07-16 03:32:13Z

2

This should do it, if my understanding of your problem is correct:

$("select").change(function() {
    $(this).closest("td").prev().find(":checkbox").prop("disabled", $(this).val() !== "0");
});

$(":checkbox").change(function() {
   $(this).parent().next().find("select").prop("disabled", this.checked);
});

Your updated fiddle.

edited Jul 16, 2011 at 3:32

answered Jul 16, 2011 at 3:14

karim79

343k67 gold badges420 silver badges409 bronze badges

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

4 Comments

billy Over a year ago

thanks it almost works. I also want to be able to disable the drop down when a checkbox is checked

karim79 Over a year ago

@larry - I've updated the answer and the demo. Please have a look.

billy Over a year ago

it works great. I tried adding a text box that will only appear when the selected value is one but I can only get it to work for the first drop down. what am I doing wrong?

karim79 Over a year ago

You need to insert the textbox relative to the current select element, for example $(this).after("<input type='text'/>"); within the select change handler. You should read more on DOM tree traversal: api.jquery.com/category/traversing

Dan Tao · Accepted Answer · 2011-07-16 03:45:14Z

1

Try this (it works for me):

$("select").change(function() {
  var $this = $(this),
      $checkbox = $this.parent().prev().find("input");

  if ($this.val() != 0) {
    $checkbox.attr("disabled", true);
  } else {
    $checkbox.removeAttr("disabled");
  }
});

$(":checkbox").change(function() {
  var $this = $(this),
      $select = $this.parent().next().find("select");

  if ($this.is(":checked")) {
    $select.attr("disabled", true);
  } else {
    $select.removeAttr("disabled");
  }
});

answered Jul 16, 2011 at 3:45

Dan Tao

129k57 gold badges309 silver badges451 bronze badges

1 Comment

billy Over a year ago

thanks that works too. If I wanted to add a text box to show/hid would I do something like: if ($this.val() != 0) { $checkbox.attr("disabled", true); $(":text").hide(); } else if ($this.val() !== 1) { $checkbox.attr("disabled", true); $(":text").show(); } else { $checkbox.removeAttr("disabled"); }});

PhonicUK · Accepted Answer · 2011-07-16 03:15:06Z

0

That's because at the 'change' event, the value you get is before the change is actually finished, so the change that the user is making 'now' doesn't show until the next time the event fires.

You want to use something like onblur, onmouseup or onkeyup to be notified post-change that you want to change the property of the check box.

answered Jul 16, 2011 at 3:15

PhonicUK

13.9k4 gold badges47 silver badges65 bronze badges

Collectives™ on Stack Overflow

jquery value in dropdown selected disable checkbox

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest