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

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:

最初将除最后一个复选框之外的所有复选框都设置为禁用
使用复选框侦听器将：

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

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，这样的事情可能会奏效。

添加一个数据属性，使您可以引用当前活动的复选框 "depends on":

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

然后，当复选框被切换时，检查它的检查状态和 "depends on" 复选框的检查状态：

$('.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 函数，如果您的标记支持它（如果从属复选框总是在您的复选框之前）重新检查，在标记中）。

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

Disable all previous checkboxes except last one, enable preceding checkbox when other enabled

javascript

checkbox

jquery

twitter-bootstrap

bootbox