jquery disabled next element if checkbox is checked

Question

How do I disabled textbox if checkbox is checked. I've got a few textboxes and checkboxes next to each other.

HTML:

<form id="form">
<input type="checkbox" name="deposit_checked"> <input type="text" name="deposit_value">
<input type="checkbox" name="booking_checked"> <input type="text" name="booking_value">
<input type="checkbox" name="referral_checked"> <input type="text" name="referral_value">
</form>

I can do it individually with code below:

$("input[name=deposit_checked]").change(function(){

if( $("input[name=deposit_checked]").is(":checked") ) {
    $("input[name=deposit_value]").attr("disabled", false);
} else {
    $("input[name=deposit_value]").attr("disabled", true);
}

})

to save time, I tried using .each() and .next() function but no luck:

$("#form input[type=checkbox]").each(function() { 
$(this).change(function(){
   if( $(this).is(":checked") ) {
  $(this).next().attr("disabled", false);
   } else {
  $(this).next().attr("disabled", true);
   }
})
})

Your code works, what is the problem?

xdazz
– xdazz

2011-10-19 06:31:18 +00:00
Commented Oct 19, 2011 at 6:31 — xdazz
– xdazz, Commented Oct 19, 2011 at 6:31

Anatoly · Accepted Answer · 2011-10-19 08:04:38Z

3

To minimize DOM objects selection, cover inputs in somethings like span.

You can see this example here: http://jsfiddle.net/g4mQR/

<form id="form">
  <span>
    <input type="checkbox" name="deposit_checked"> 
    <input type="text" name="deposit_value">
  </span>
  <span>
    <input type="checkbox" name="booking_checked"> 
    <input type="text" name="booking_value">
  </span>
  <span>
    <input type="checkbox" name="referral_checked"> 
    <input type="text" name="referral_value">
  </span>
</form>

JS code

$('#form input[type=checkbox]').click(function(){
  var obj = $(this).siblings('input[type=text]');
  obj.attr('disabled', !obj.attr('disabled'));
})

answered Oct 19, 2011 at 8:04

Anatoly

15.6k5 gold badges57 silver badges77 bronze badges

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

Comments

Andrei · Accepted Answer · 2011-10-19 07:34:52Z

3

You were setting wrong value for the disabled attribute. Here is the fix:

$("#form input[type=checkbox]").each(function() { 
$(this).change(function(){
   if( $(this).is(":checked") ) {
  $(this).next().removeAttr("disabled");
   } else {
  $(this).next().attr("disabled", "disabled");
   }
})
})

Here is the working example at jsfiddle. Note that the all the javascript should be declared in the $(window).load() handler.

edited Oct 19, 2011 at 7:34

answered Oct 19, 2011 at 6:29

Andrei

56.8k10 gold badges92 silver badges114 bronze badges

1 Comment

Andrei Over a year ago

Please see the updated post with reference to the working example at jsfiddle.

nooga · Accepted Answer · 2011-10-19 06:32:38Z

1

This should do:

$('#form input[type="checkbox"]').change(function() {
   var t = $(this);
    t.next().attr('disabled', ! t.is(':checked'));
});

Remember to set the fields' and checkboxes' state in the beginning. For example: all unchecked and disabled.

+You may want to change the #form bit in the selector.

answered Oct 19, 2011 at 6:32

nooga

5701 gold badge6 silver badges19 bronze badges

Comments

FosterZ · Accepted Answer · 2011-10-19 06:48:58Z

1

i guess you want to hide n show the texbox respective to its checkbox, so you can do this by attaching change event, this is how it is done: change event handler is fired every time the value of the check box is changed

$(document).ready(function() {
   $('.chkboxClass').bind('change', function () {

   if ($(this).is(':checked'))
     $(this).next('.txtboxclass').hide();
   else
     $(this).next('.txtboxclass').show();

  });
});

where .chkboxclass is class for all checkboxes and .txtboxclass is class for all textboxes

edited Oct 19, 2011 at 6:48

answered Oct 19, 2011 at 6:40

FosterZ

3,9216 gold badges41 silver badges64 bronze badges

Collectives™ on Stack Overflow

jquery disabled next element if checkbox is checked

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related