JQuery: If Checked Enable else Disable

Question

Fiddle - http://jsfiddle.net/XH5zm/
JSBin - http://jsbin.com/UKIweJE/1/edit

I'm trying to enable/disable an input textbox by toggling if a checkbox is checked or not.

$(document).ready(function() {
  if ($('.enable-padding').attr('checked') === true) {
    $('.grab-padding').attr('enabled','enabled');
    $('.grab-padding').val("13px");
  } else {
    $('.grab-padding').attr('disabled','disabled');
    $('.grab-padding').val(" ");
  }
});

What exactly am I'm doing wrong?

Any help is greatly appreciated.

Ram · Accepted Answer · 2014-01-20 00:20:16Z

5

You don't listen to the change event.
There is no enabled property.

.attr() doesn't return a boolean value and it doesn't change the properties.

$('.enable-padding').on('change', function() {
    $('.grab-padding').prop('disabled', !this.checked)
                      .val(this.checked ? "13px" : "");
});

answered Jan 20, 2014 at 0:20

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

Gaucho_9 · Accepted Answer · 2014-01-20 00:19:59Z

1

You have to add an event for change the state of checkbox:

$(document).ready(function() {
  $('.enable-padding').on('change',function(){
    if ($('.enable-padding').is(':checked')) {
    $('.grab-padding').removeAttr('disabled');
    $('.grab-padding').val("13px");
  } else {
    $('.grab-padding').attr('disabled','disabled');
    $('.grab-padding').val(" ");
  }
  });
});

and modifiy the input for this:

<input class="grab-padding" type="text" value="13px"></td>

answered Jan 20, 2014 at 0:19

Gaucho_9

2651 gold badge3 silver badges11 bronze badges

Comments

T McKeown · Accepted Answer · 2014-01-20 00:35:09Z

0

$('#chbox').click(function () {
  if ( $('#txt_data').attr('disabled') =='disabled' ){
      $('#txt_data').removeAttr('disabled');
  }else{
         $('#txt_data').attr('disabled','disabled');
  }

});

answered Jan 20, 2014 at 0:35

T McKeown

12.9k1 gold badge27 silver badges35 bronze badges

Collectives™ on Stack Overflow

JQuery: If Checked Enable else Disable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related