Question

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

如何限制搜索？例如，如果用户选择了 check1 复选框，或者选中了复选框 check1 和 check2

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

Answer 1

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

以下部分代码使用ES6功能。如果你不能使用它们，那么将这个想法转化为ES5应该不难：

＆＃13;

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

＆＃13;

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

＆＃13;

此fiddle也可以使用相同的内容。

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

1 个答案: