JQUERY鏈接變量if語句中的邏輯運算符

Question

我目前有2組複選框。表單的提交按鈕應保持禁用狀態，直到每個組的至少一個複選框被選中。 現在它只適用於第一類（除了數字，名稱/ ID都是一樣的，你會看到）。 HTML：

<h3>Choose func</h3> 
<input type="hidden" name="func1" value="" /> 
<input type="checkbox" name="func1" value="1" id="func1" /> f1 <br/> 
<input type="hidden" name="func2" value="" /> 
<input type="checkbox" name="func2" value="1" id="func2" /> f2<br/> 
<input type="hidden" name="func3" value="" /> 
<input type="checkbox" name="func3" value="1" id="func3"/> f3<br/> 
<br/> 
<h3>Choose plat</h3> 
<input type="hidden" name="plat1" value="" /> 
<input type="checkbox" name="plat1" value="1" id="plat1" /> p1<br/> 
<input type="hidden" name="plat2" value="" /> 
<input type="checkbox" name="plat2" value="1" id="plat2" /> p2<br/> 
<input type="hidden" name="plat3" value="" /> 
<input type="checkbox" name="plat3" value="1" id="plat3" /> p3<br/> 
<input type="hidden" name="plat4" value="" /> 
<input type="checkbox" name="plat4" value="1" id="plat4" /> p4<br/> 
<br/><br/> 
<script> 
</script> 
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="submit" disabled=""> 

JS：

$(function() { 
    $("#func1, #func2, #func3").change(function() { 
     if ( $("#func1").is(' :checked') || $("#func2").is(':checked') || $("#func3").is(':checked') ) { 

      $('.inputButton').attr('disabled', false); 
     } 
     else { 
      $('.inputButton').attr('disabled', true); 
     } 
    }); 
}); 

我在的jsfiddle當前代碼：https://jsfiddle.net/g4jcjn51/

所以我想到某事。像這樣（不起作用）：

if ( ($("#func1").is(' :checked') || $("#func2").is(':checked') || $("#func3").is(':checked')) && $("#plat1").is(' :checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked') ) 
{ 
} 

任何解決方案？ 謝謝！

Answer 1

 $("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4").change(function() { 
      if (($("#func1").is(':checked') || $("#func2").is(':checked') || $("#func3").is(':checked')) && ($("#plat1").is(':checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked'))) { 

       $('.inputButton').attr('disabled', false); 
      } 
      else { 
       $('.inputButton').attr('disabled', true); 
      } 
     }); 

Answer 2

什麼計數選中的複選框這樣的：

var checked1 = $('input[name="func1"]:checked').length; 
var checked2 = $('input[name="func2"]:checked').length; 

if (checked1 > 0 && checked2> 0){ 
    //Do your stuff 
} else { 
    alert("At least one checkbox of each group has to be checked."); 
} 

Answer 3

你可以給你的形式的ID，然後選中所有複選框一次並進行驗證。

HTML：

<h3>Choose func</h3> 
<form id="form1"> 
<input type="hidden" name="func1" value="" /> 
<input type="checkbox" name="func1" value="1" id="func1" /> f1 <br/> 
<input type="hidden" name="func2" value="" /> 
<input type="checkbox" name="func2" value="1" id="func2" /> f2<br/> 
<input type="hidden" name="func3" value="" /> 
<input type="checkbox" name="func3" value="1" id="func3"/> f3<br/> 
<br/> 
<h3>Choose plat</h3> 
<input type="hidden" name="plat1" value="" /> 
<input type="checkbox" name="plat1" value="1" id="plat1" /> p1<br/> 
<input type="hidden" name="plat2" value="" /> 
<input type="checkbox" name="plat2" value="1" id="plat2" /> p2<br/> 
<input type="hidden" name="plat3" value="" /> 
<input type="checkbox" name="plat3" value="1" id="plat3" /> p3<br/> 
<input type="hidden" name="plat4" value="" /> 
<input type="checkbox" name="plat4" value="1" id="plat4" /> p4<br/> 
<br/><br/> 
<script> 
</script> 
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="submit" disabled=""/> 
</form> 

JS：

$(function() { 
    $("#form1").find("input[type=checkbox]").change(function() { 
     if ($(this).is(' :checked')){     
      $('.inputButton').attr('disabled', false); 
     } 
     else { 
      $('.inputButton').attr('disabled', true); 
     } 
    }); 
}); 

JSFiddle

Answer 4

我建議你使用組一個<div>或<fieldset>，這樣你可以很容易地判斷哪些項目你的複選框在哪個組中。那麼你應該能夠很容易地弄清楚所有的組是否至少有一個檢查過的輸入。

$(function() { 
 
    $("input[type=checkbox]").change(function() { 
 
    var anySegmentIsUnchecked = $('fieldset').is(':not(:has(:checked))'); 
 
    $('.input-button').prop('disabled', anySegmentIsUnchecked); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form> 
 
    <fieldset> 
 
    <legend> 
 
     <h3>Choose func</h3> 
 
    </legend> 
 
    <input type="hidden" name="func1" value="" /> 
 
    <input type="checkbox" name="func1" value="1" id="func1" />f1 
 
    <br/> 
 
    <input type="hidden" name="func2" value="" /> 
 
    <input type="checkbox" name="func2" value="1" id="func2" />f2 
 
    <br/> 
 
    <input type="hidden" name="func3" value="" /> 
 
    <input type="checkbox" name="func3" value="1" id="func3" />f3 
 
    <br/> 
 
    </fieldset> 
 
    <fieldset> 
 
    <legend> 
 
     <h3>Choose plat</h3> 
 
    </legend> 
 
    <input type="hidden" name="plat1" value="" /> 
 
    <input type="checkbox" name="plat1" value="1" id="plat1" />p1 
 
    <br/> 
 
    <input type="hidden" name="plat2" value="" /> 
 
    <input type="checkbox" name="plat2" value="1" id="plat2" />p2 
 
    <br/> 
 
    <input type="hidden" name="plat3" value="" /> 
 
    <input type="checkbox" name="plat3" value="1" id="plat3" />p3 
 
    <br/> 
 
    <input type="hidden" name="plat4" value="" /> 
 
    <input type="checkbox" name="plat4" value="1" id="plat4" />p4 
 
    <br/> 
 
    </fieldset> 
 
</form> 
 
<input type="submit" name="abfrage" class="input-button" id="idAbfragen" value="submit" disabled>

Fiddle

一分大優勢，以這種方法，它遵循open/closed principle：你不必改變你的JavaScript代碼，如果你添加複選框組或多組。

Answer 5

你可以把它包裝成兩組，#group1和#group2即<div id="group1">等，然後

$("input[type=checkbox]").on('click', function() { 
    if ($("#group1 input:checked").length>0 && 
     $("#group2 input:checked").length>0) { 
     $("#idAbfragen").attr('disabled', false); 
    } else { 
     $("#idAbfragen").attr('disabled', true); 
    } 
}); 

叉小提琴 - >https://jsfiddle.net/kee7m06r/