javascript - 当我单击与之对应的复选框时，如何使不可编辑的文本框变为可编辑

Question

有一个复选框和一个不可编辑的文本框与之对应。当我单击复选框时，相应的不可编辑文本框应变为可编辑文本框。我怎样才能做到这一点？

Answer 1

基本上:

$('#some-checkbox').click(function() {
   $('#some-textfield').prop('disabled', !$(this).is(':checked'));
});

现在，如何找到相应的文本框取决于您的标记。一种方法是为文本框提供一个类，该类是复选框的 ID。将其应用于所有复选框可能看起来像这样:

$(':checkbox').click(function() {
   var box = $(this);
   $('.' + box.attr('id')).prop('disabled', !box.is(':checked'));
});

否则，文本字段可能会根据其在 DOM 中的位置定位:

<div class="wrapper">
   <input type="checkbox">
   ...
   <div>
      <input type="text" disabled="disabled" />
   </div>
</div>

然后你可能会做类似的事情:

$(':checkbox').click(function() {
   var box = $(this);
   box.closest('.wrapper').find('input[type=text]').prop('disabled', !box.is(':checked'));
});