如何为更多 ID 运行函数？

Question

当用户检查某些选项时，我想禁用表单中的上一个按钮。因此，如果他选择 ID 1 OR 2 OR 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 OR 2 OR 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">