JQuery:如果选中启用则禁用

时间:2014-01-20 00:13:59

标签: javascript jquery

小提琴 - http://jsfiddle.net/XH5zm/
JSBin - http://jsbin.com/UKIweJE/1/edit

我正在尝试通过切换来启用/禁用输入文本框,如果选中了复选框。

$(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(" ");
  }
});

我究竟做错了什么?

非常感谢任何帮助。

3 个答案:

答案 0 :(得分:5)

  1. 您不听change事件。
  2. 没有enabled属性。
  3. .attr()不会返回布尔值,也不会更改属性。

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

答案 1 :(得分:1)

您必须添加一个事件来更改复选框的状态:

$(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(" ");
  }
  });
});

并修改此输入:

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

答案 2 :(得分:0)

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

});