javascript - 禁用除最后一个以外的所有先前复选框，启用其他复选框时启用前面的复选框

Question

我为此搜索了一段时间，但找不到解决方案。基本上，我有一个简单的表单，它将动态变化(一个 ID 最多可以存在 20 个循环)。删除循环的验证，假设有 3 个，1、2 和 3，是你可以删除 #3，但你不能删除 #2，直到你删除 #3，你不能删除 #1，直到你删除#2。

所以，在前端，我在考虑一种设计，它会禁用除最后一个复选框以外的所有复选框，然后当您选中最后一个复选框时，将启用下一个先前的复选框并且能够被选中，等等在。然后，用户将删除(通过 Bootbox 模态提交按钮回调，这甚至有点棘手)。

这是我用来测试的一个简单表单:

 <form class="form-horizontal" id="deleteCycles" action="/deleteCyclesScript" method="post">
<div class="col-md-12" style="margin-top: 30px; margin-bottom: 10px;">
    <div class="checkbox"><label><input id="cycle1" type="checkbox" value="cycle1" class="dynamicCheckboxes">Cycle 1</label></div>
    <div class="checkbox"><label><input id="cycle2" type="checkbox" value="cycle2" class="dynamicCheckboxes">Cycle 2</label></div>
    <div class="checkbox"><label><input id="cycle3" type="checkbox" value="cycle3" class="dynamicCheckboxes">Cycle 3</label></div>
</div>
</form>

如何动态编写 JavaScript(我使用的是 jQuery 1.12.4)来实现这一点？我希望 ID 中有一些东西几乎可以形成一系列启用复选框——最后一个默认启用，因为它不依赖于其他复选框被删除，但是，然后动态启用其他复选框它上面的一个被启用。

有人可以帮忙吗？

非常感谢!

Answer 1

所以你可以使用 jquery 来做到这一点:

1. 最初将除最后一个复选框之外的所有复选框都设置为禁用

2. 使用复选框监听器将:

   一个。在打勾时启用前面的复选框

   取消勾选时禁用所有前面的复选框

请看下面的演示:

// Initialize : disable all but the last checkbox
$('#deleteCycles .checkbox:last').prevAll().each(function() {
  $(this).find('input').attr('disabled', 'disabled');
});

// checbox listener
$('#deleteCycles .checkbox input').change(function() {
  if ($(this).is(":checked")) {
    // enable the checkbox just above
    $(this).closest('.checkbox').prev('.checkbox').find('input').removeAttr('disabled');
  } else {
    // disable all checkboxes preceeding
    $(this).closest('.checkbox').prevAll().each(function() {
      $(this).find('input').attr({
        'disabled': 'disabled',
        'checked': false
      });
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-horizontal" id="deleteCycles" action="/deleteCyclesScript" method="post">
  <div class="col-md-12" style="margin-top: 30px; margin-bottom: 10px;">
    <div class="checkbox">
      <label>
        <input id="cycle1" type="checkbox" value="cycle1" class="dynamicCheckboxes">Cycle 1</label>
    </div>
    <div class="checkbox">
      <label>
        <input id="cycle2" type="checkbox" value="cycle2" class="dynamicCheckboxes">Cycle 2</label>
    </div>
    <div class="checkbox">
      <label>
        <input id="cycle3" type="checkbox" value="cycle3" class="dynamicCheckboxes">Cycle 3</label>
    </div>
  </div>
</form>