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

Question

我已经为此搜索了一段时间，但找不到解决方案。基本上，我有一个简单的表格，它是动态的（一个 ID 最多可以存在 20 个周期）。删除 Cycles 的验证，比如其中有 3 个，1、2 和 3，是您可以删除 #3，但在删除 #3 之前您不能删除 #2，并且您不能删除 #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. 使用复选框监听器：

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

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

请看下面的演示：

// 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>

Answer 2

        $(function () {
            $(':checkbox').attr('disabled', true).each(function (index, element) {
                $(this).data('index', index);
            }).change(function () {
                if($(this).is(':checked'))
                {
                    $(this).parents('.checkbox:first').prev().find(':checkbox').attr('disabled', null);
                }
                else
                {
                    $(this).parents('form:first').find(':checkbox:lt(' + $(this).data('index') + ')').attr('checked', false).attr('disabled', true);
                }
            }).last().attr('disabled', null);
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

Answer 3

假设 ID 是连续的，这样的事情可能会奏效。

添加一个数据属性，让您可以引用当前活动复选框“依赖”的复选框：

<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" data-dependsOn="#cycle1" />
                Cycle 2
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input id="cycle3" type="checkbox" value="cycle3" class="dynamicCheckboxes" data-dependsOn="#cycle2" />
                Cycle 3
            </label>
        </div>
    </div>
</form>

然后，当复选框被切换时，检查它的检查状态和“取决于”复选框的检查状态：

$('.dynamicCheckboxes').on('change', function(e){
    // hold reference to the current checkbox
    var _this = $(this);

    if(!_this.is(':checked')){  
        var dependsOn = _this.data('dependsOn');
        if(dependsOn != ""){
            if($(dependsOn).is(':checked')){
                e.preventDefault();

                // display some sort of error message
            }   
        }   
    }
});

您也可以使用 jQuery .prev 函数，如果您的标记支持它（如果相关复选框始终位于您正在检查的复选框之前，则在标记中）。