javascript - 使用jquery在加载时选中复选框时如何禁用所有输入

Question

如果未选中，我希望input每个tr禁用checkbox- 在页面加载时。据我了解，我必须调用一个函数来检查是否checkbox已检查。但正如我下面的代码，它不起作用。

$(function() {
  fn_chkBox('.form-check-input'); //see if checked on load
  function fn_chkBox() {
    if ($(this).is(':checked')) {
      $(this).closest("tr").find("input.form-control").prop("disabled", false);
    } else {
      $(this).closest("tr").find("input.form-control").prop("disabled", true);
    }
  }
});

$(".form-check-input").change(function() {
  if ($(this).is(':checked')) {
    $(this).closest("tr").find("input.form-control").prop("disabled", false);
  } else { //unchecked
    $(this).closest("tr").find("input.form-control").prop("disabled", true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Day</th>
    <th>Fish</th>
    <th>Crab</th>
    <th>Shrimp</th>
    <th>Squid</th>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
    <td><input type="text" class="form-control" name="mon[1]" /></td>
    <td><input type="text" class="form-control" name="mon[2]" /></td>
    <td><input type="text" class="form-control" name="mon[3]" /></td>
    <td><input type="text" class="form-control" name="mon[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
    <td><input type="text" class="form-control" name="tue[1]" /></td>
    <td><input type="text" class="form-control" name="tue[2]" /></td>
    <td><input type="text" class="form-control" name="tue[3]" /></td>
    <td><input type="text" class="form-control" name="tue[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
    <td><input type="text" class="form-control" name="wed[1]" /></td>
    <td><input type="text" class="form-control" name="wed[2]" /></td>
    <td><input type="text" class="form-control" name="wed[3]" /></td>
    <td><input type="text" class="form-control" name="wed[4]" /></td>
  </tr>
</table>

如果它为空，我希望在加载时禁用input每一行中的所有内容。trcheckbox

标签： javascripthtmljquery

Answer 1

您可以使用.form-check-input:not(:checked)选择器来选择所有未选中的复选框。

$(function() {
  $('.form-check-input:not(:checked)').closest("tr").find("input.form-control").prop("disabled", true);
});

$(".form-check-input").change(function() {
  if ($(this).is(':checked')) {
    $(this).closest("tr").find("input.form-control").prop("disabled", false);
  } else { //unchecked
    $(this).closest("tr").find("input.form-control").prop("disabled", true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Day</th>
    <th>Fish</th>
    <th>Crab</th>
    <th>Shrimp</th>
    <th>Squid</th>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
    <td><input type="text" class="form-control" name="mon[1]" /></td>
    <td><input type="text" class="form-control" name="mon[2]" /></td>
    <td><input type="text" class="form-control" name="mon[3]" /></td>
    <td><input type="text" class="form-control" name="mon[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
    <td><input type="text" class="form-control" name="tue[1]" /></td>
    <td><input type="text" class="form-control" name="tue[2]" /></td>
    <td><input type="text" class="form-control" name="tue[3]" /></td>
    <td><input type="text" class="form-control" name="tue[4]" /></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
    <td><input type="text" class="form-control" name="wed[1]" /></td>
    <td><input type="text" class="form-control" name="wed[2]" /></td>
    <td><input type="text" class="form-control" name="wed[3]" /></td>
    <td><input type="text" class="form-control" name="wed[4]" /></td>
  </tr>
</table>