Question

当用户选中某些选项时，我想禁用表单中的上一个按钮。因此，如果他选择ID 1或2或3，则必须禁用上一个按钮。

但是如果用户选中1而不是2 OR 3，则必须保持上一个按钮不被禁用。如果他没有选择1 OR 2 OR 3，则必须启用前一个按钮。

我尝试了以下内容：

$.each(["1", "2", "3"], function(index, mainOption) {
  $('#option_' + mainOption).change(function() {
    if ($(this).prop('checked')) {
      $('#previous_button').prop('disabled', true);
    } else {
      $('#previous_button').prop('disabled', false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="checkbox">
  <li class="option_1">
    <input name="input_1" type="checkbox" value="option1" id="option_1">
    <label>Option 1</label>
  </li>
  <li class="option_2">
    <input name="input_2" type="checkbox" value="option2" id="option_2">
    <label>Option 2</label>
  </li>
  <li class="option_3">
    <input name="input_3" type="checkbox" value="option3" id="option_3">
    <label>Option 3</label>
  </li>
</ul>

<input type="button" id="previous_button" class="previous_button button" value="Back">

相关JS Fiddle here

所以你看到取消选中其中一个按钮

我试过了，但这并没有完全符合我的要求，使用此按钮将在选中1或2或3时启用，取消选中其中一个将启用该按钮。那不是我想要的。如果选中其中一个选项，则前一个按钮必须保持禁用状态。只有在未选中其中一个时，才能启用该按钮。

Answer 1

您必须考虑所有复选框（此代码仍可以优化）：

let ids = ["1", "2", "3"];
$.each(ids, function( index, mainOption ) {
    $('#option_'+mainOption).change(function(){
        if($(this).prop('checked')){
            $('#previous_button').prop('disabled', true);
        } else {
            let cnt = 0;
            $.each(ids, function( index, mainOption ) {
                if ($('#option_'+mainOption).prop('checked')) {
                    cnt++;
                }
            })
            if (cnt === 0) {
                $('#previous_button').prop('disabled', false);
            }
        }
    });
});

Answer 2

您可以使用event delegation mechanism并在第一个共同祖先上注册您的侦听器，并将disabled属性应用于上一个按钮，无论是否已选中一个或多个复选框。

// The function used to filter eligible checkboxes
// to be passed to jQuery "filter" function below
let myFilter = function (i, el) {
  // Only include checkboxes whose id matches the following pattern
  return /-[12]$/.test(el.id)
}

// Register click event on the first common ancestor
$('form').on('click', function(e) {
  let $form = $(this), $target = $(e.target);

  // If a checkbox get clicked
  if ($target.is('input[type="checkbox"]')) {
    let shouldDisable = !!$form.find('input:checked').filter(myFilter).length;
    $form.find('button').prop('disabled', shouldDisable);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <h2>Select one or more items</h2>
  <label for="checkbox-1">Checkbox 1</label>
  <input type="checkbox" id="checkbox-1" name="checkbox" />
  <label for="checkbox-2">Checkbox 2</label>
  <input type="checkbox" id="checkbox-2" name="checkbox" />
  <label for="checkbox-3">Checkbox 3</label>
  <input type="checkbox" id="checkbox-3" name="checkbox" />
  <br />
  <button type="button">Prev</button>
</form>

适用于您的标记的内容包括：

let myFilter = function(i, el) {
  return /_[12]$/.test(el.id)
}
$('ul').on('click', function(e) {
  let $ul = $(this),
    $target = $(e.target);

  if ($target.is('input[type="checkbox"]')) {
    let shouldDisable = !!$ul.find('input:checked').filter(myFilter).length;
    $ul.next().prop('disabled', shouldDisable);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="checkbox">
  <li class="option_1">
    <input name="input_1" type="checkbox" value="option1" id="option_1">
    <label>Option 1</label>
  </li>
  <li class="option_2">
    <input name="input_2" type="checkbox" value="option2" id="option_2">
    <label>Option 2</label>
  </li>
  <li class="option_3">
    <input name="input_3" type="checkbox" value="option3" id="option_3">
    <label>Option 3</label>
  </li>
</ul>

<input type="button" id="previous_button" class="previous_button button" value="Back">

如何运行更多ID的功能？

2 个答案: