如何使用复选框限制多个输入？答案

【问题标题】：How to restrict multiple inputs with checkbox?如何使用复选框限制多个输入？
【发布时间】：2016-12-27 01:55:46
【问题描述】：

我有一个包含 6 个输入的表单，输入按两个分组，我使用 this fiddle 中的复选框启用/禁用它们。

如何限制搜索？例如，如果用户选择了 check1 复选框，或者他们选择了复选框 check1 和 check2，我需要让用户知道他们需要填写两个输入em> 他们需要填写所有 4 个输入。现在我有这个：

if( (check1.checked || check2.checked || check3.checked) ){
    if($scope.tolPositivaDim1 == '' || $scope.tolNegativaDim1 == '' || 
       $scope.tolPositivaDim2 == '' || $scope.tolNegativaDim2 == '' || 
       $scope.tolPositivaDim3 == '' || $scope.tolNegativaDim3 == ''){
        console.log(''Need to fill all inputs);
    } else
    console.log('Something');
} else {
    console.log('Need to check at least one');
}

但是有了这个，直到我填写了六个输入，它才让我搜索。有没有办法不用if为每个具体案例做这个？：

if(check1.checked)  || if(check1.checked && check2.checked).....

【问题讨论】：

标签： javascript html angularjs forms

【解决方案1】：

您可以改进代码以使用任意数量的此类复选框和双输入组合。然后为表单的submit 事件定义一个处理程序，并检查输入在未禁用时是否为空。如果其中一个为空返回false，则取消提交。

下面的一些代码使用了 ES6 特性。如果你不能使用这些，将这个想法转化为 ES5 应该不难：

var checks = [...document.querySelectorAll('[id^=checkDimension]')], 
    positivaDims = [...document.querySelectorAll('[id^=tolPositivaDim')],
    negativaDims = [...document.querySelectorAll('[id^=tolNegativaDim')];

checks.forEach(function (check, i) {
  check.onchange = function() {
    positivaDims[i].disabled = !checks[i].checked;
    negativaDims[i].disabled = !checks[i].checked;
  }.bind(i);
  // call the above code also on page load, so to initialise the disabled
  // properties correctly:
  check.onchange();
});

document.forms[0].onsubmit = function (e) {
  if (positivaDims.concat(negativaDims).some(function (input) {
    // if for any non-disabled input the value is blank... 
    return !input.disabled && input.value == '';
  })) {
    alert('All inputs are required.');
    // cancel form submission (either of the two methods below will do it)
    e.preventDefault();
    return false;
  }
}

<form class="" method="post">
  <div class="form-group col-sm-12">
    <div class="col-sm-4">
      <div class="checkbox">
        <label><input type="checkbox" id="checkDimension1"> Dimension 1</label>
      </div>
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="tolPositivaDim1" placeholder="0.03" ng-model="tolPositivaDim1">
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="tolNegativaDim1" placeholder="0.03" ng-model="tolNegativaDim1">
    </div>
  </div>
  <div class="form-group col-sm-12">
    <div class="col-sm-4">
      <div class="checkbox">
        <label><input type="checkbox" id="checkDimension2"> Dimension 2</label>
      </div>
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="tolPositivaDim2" placeholder="0.03" ng-model="tolPositivaDim2">
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="tolNegativaDim2" placeholder="0.03" ng-model="tolNegativaDim2">
    </div>
  </div>
  <div class="form-group col-sm-12">
    <div class="col-sm-4">
      <div class="checkbox">
        <label><input type="checkbox" id="checkDimension3"> Dimension 3</label>
      </div>
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="tolPositivaDim3" placeholder="0.03" ng-model="tolPositivaDim3">
    </div>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="tolNegativaDim3" placeholder="0.03" ng-model="tolNegativaDim3">
    </div>
  </div>
  <button type="submit" class="btn btn-default pull-right" >Search</button>
  <button class="btn btn-default pull-right">Cancel</button>
</form>

fiddle 也有同样的功能。

【讨论】：