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来做到这一点：

最初设置除最后一个复选框以外的所有复选框
使用复选框监听器：

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

湾取消选中时禁用所有前置复选框

见下面的演示：

// 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，这样的东西可能会起作用。

添加一个数据属性，可让您引用当前有效复选框＆＃34;取决于＆＃34;的复选框：

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

然后，当切换复选框时，检查它的检查状态和＆＃34;取决于＆＃34;复选框的检查状态：

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

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

3 个答案: