javascript - 使用复选框禁用动态输入

Question

我有一个复选框/选择，并希望在选中复选框时启用选择，并在未选中时禁用选择。

<p>
<input id="option[21]" type="checkbox" name="checkbox[21]">
<select id="option[21]" name="select[21]" disabled><option value="">-</option><option value="1">Today</option><option value="2">Tomorrow</option></select>
</p>

<p>
<input id="option[22]" type="checkbox" name="checkbox[22]">
<select id="option[22]" name="select[22]"  disabled><option value="">-</option><option value="1">Today</option><option value="2">Tomorrow</option></select>
</p>

当我运行我的代码时，它似乎没有正确选择下拉列表：

$(document).on('change', 'input[type=checkbox]', function(event) {
  var selectId = event.target.id;
  console.log(selectId);

  if ($(this).is(':checked')) {
    $(selectId).removeAttr('disabled');
  } else {
    $(selectId).prop( "disabled", true );
  }
});

https://jsfiddle.net/rL3ghb0f/

标签： javascripthtmljquery

Answer 1

您的文档中有重复的 id，这在 HTML5（或任何版本的 AFAIK）中是不允许的，并且行为不是规范的，但通常是这样，document.getElementById并且document.querySelector会返回第一个元素。

相反，您可以只使用 jQuery.siblings方法来遍历相对于单击元素的 DOM：

$(document).on('change', 'input[type=checkbox]', function(event) {
  let $el = $(this);
  $el.siblings('select').prop("disabled", !$el.is(':checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<input id="option[21]" type="checkbox" name="checkbox[21]">
<select name="select[21]" disabled><option value="">-</option><option value="1">Today</option><option value="2">Tomorrow</option></select>
</p>

<p>
<input type="checkbox" id="option[22]" name="checkbox[22]">
<select name="select[22]"  disabled><option value="">-</option><option value="1">Today</option><option value="2">Tomorrow</option></select>
</p>