CODEWITHSUNDEEP
jquerycheckboxeach
tonoslfx
tonoslfx

Reputation: 3442

jquery disabled next element if checkbox is checked

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);
   }
})
})

Upvotes: 2

Views: 3469

Answers (4)

Anatoly
Anatoly

Reputation: 15530

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'));
})

Upvotes: 3

Andrei
Andrei

Reputation: 56688

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.

Upvotes: 3

FosterZ
FosterZ

Reputation: 3911

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

Upvotes: 1

nooga
nooga

Reputation: 570

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.

Upvotes: 1

Related Questions