Как ограничить несколько входов с помощью флажка?

Question

Как ограничить несколько входов с помощью флажка?

0

У меня есть форма с 6 входами, входы сгруппированы по два, и я включаю/выключаю их, используя флажок, как в этой скрипке.

Как ограничить поиск? Например, я должен сообщить пользователю, что им нужно заполнить оба входа, если они выберут флажок check1, или если они выбрали флажки check1 и check2, они должны заполнить все 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).....

Sebastian Chavez Irurzo 19 авг. 2016, в 22:53

Источник

Теги:

javascript

html

angularjs

forms

1 ответ

Ещё вопросы

trincot · Answer 1 · 2016-08-19T19-25-00.000Z

Вы можете улучшить код для работы с любым количеством таких флажков и комбинаций двойного ввода. Затем определите обработчик для события 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>

То же самое можно найти и в этой скрипке.