複数の入力をチェックボックスで制限するにはどうすればよいですか？

Question

私は入力が6つのフォームを持っていますが、入力は2つにグループ化されており、this fiddleのようなチェックボックスを使って入力を有効/無効にしています。

検索を制限するにはどうすればよいですか？たとえば、チェック1チェックボックスを選択した場合、またはチェックボックスチェック1およびチェック2を選択した場合、両方の入力をすべて入力する必要があることをユーザーに伝える必要があります。今私はこれを持っています：

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

しかし、これで私は6つの入力を埋めるまで検索することはできません。それぞれの特定のケースのためにifを行うことなく、これを行う方法？：

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

Answer 1

あなたは、このようなチェックボックス&重入力の組み合わせの任意の数で動作するようにコードを改善できるがあります。フォームのsubmitイベントのハンドラを定義し、無効になっていない入力が空でないことを確認します。それらのうちの1つが空の場合は、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でもご覧になれます。