jquery - 选中复选框时启用文本字段

Question

$("#owncar").click(function() {
  if ($(this).is(':checked')) {
    $("#carnumber").attr('disabled', false);
  } else {
    $("#carnumber").val('');
    $("#carnumber").attr('disabled', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<tr>
  <td>Have own car :</td>
  <td>
    <input type="checkbox" name="owncar" id="owncar" value="Y" />
  </td>
</tr>

<tr>
  <td>Car Number :</td>
  <td>
    <input type="text" name="carnumber" id="carnumber" maxlength="10" disabled/>
  </td>
</tr>

当用户勾选自己的汽车复选框时，启用汽车编号文本字段以允许用户填写汽车编号。

上面的代码对我来说没问题。
单击复选框时是否还有其他方法可以启用文本字段？

Answer 1

使用prop()设置复选框的checked状态。要设置文本框的值，请使用带有回调的val()。

// Use change event on the checkbox
$("#owncar").change(function() {
    // Cache checked status
    var checked = this.checked;

    // If checkbox is checked, enable the textfield
    // else disable
    $("#carnumber").prop('disabled', !checked).val(function(i, oldVal) {
        // If the checkbox is not checked, then empty the value
        return checked ? oldVal : '';
    });
});

Answer 2

使用removeAttr方法

$("#owncar").click(function(){
    if($(this).is(':checked')){
        $("#carnumber").removeAttr('disabled');
    } else {
        $("#carnumber").val('');
        $("#carnumber").attr('disabled', true);
    }
});