javascriptで同じクラスの要素の条件を設定します。

Question

ユーザーが選択したかどうかを確認するチェックボックスが2つあります。 2を選択すると、それ以上は選択できません。 問題は、それらを複数の行で数回使用し、同じクラスを使用していることです。

ボタンの各グループで2つのチェックボックスしか選択されていない場合、どうすればjavascriptでチェックできますか？

HTML：

<td> 
    <!-- First Group of Buttons --> 
    <p>Barcelona</p> 
    <label class="dir-bet" type="checkbox">Barcelona Win</label> 
</td> 
<td class="middle-table"> 
    <p>VS</p> 
    <label class="dir-bet" type="checkbox">Draw</label> 
</td> 
<td class="team-header"> 
    <p>R.Madrid</p> 
    <label class="dir-bet" type="checkbox">R.MadridWin</label> 
</td> 
</tr> 
<tr> 
<td> 
    <!-- Second Group of Buttons --> 
    <p>Barcelona</p> 
    <label class="dir-bet" type="checkbox">Barcelona Win</label> 
</td> 
<td class="middle-table"> 
    <p>VS</p> 
    <label class="dir-bet" type="checkbox">Draw</label> 
</td> 
<td class="team-header"> 
    <p>R.Madrid</p> 
    <label class="dir-bet" type="checkbox">R.Madrid Win</label> 
</td> 

のJavaスクリプト：

var list = document.getElementsByClassName("dir-bet"); 

var checkBet = function(){ 
var checkNum = 0; 
    for (i = 0; i < list.length; i++){ 
    if(list[i].getAttribute("checked")){ 
     checkNum++; 
    } 
    } 
    if (checkNum<2) { 
     if(this.getAttribute("checked")){ 
     this.setAttribute("checked",""); 
     this.classList.remove ("prime-bg", "prime-clr"); 
     }else{ 
     this.setAttribute("checked","true"); 
     this.classList.add ("prime-bg", "prime-clr"); 
     } 
    }else{ 
    if(this.getAttribute("checked")){ 
     this.setAttribute("checked",""); 
     this.classList.remove ("prime-bg", "prime-clr"); 
    } 
    } 
}; 

for (i = 0; i < list.length; i++){ 
list[i].addEventListener("click", checkBet); 
} 

Answer 1

あなたのクリックが発生した行どのテーブルでチェックし、そのdir-betクラス要素のリストだけを得ることができますその行の中にあります。その小さな要素のリストに計数ロジックを適用します。他のいくつかの改善を

、あなたのcheckBet関数は次のようになります。

var checkBet = function() { 
    var checked = this.getAttribute("checked"); 
    if (!checked) { // a count is only needed when adding a check mark: 
     var list = this.parentElement.parentElement.getElementsByClassName("dir-bet"); 
     var checkNum = 0; 
     for (var i = 0; i < list.length; i++) { 
      if (list[i].getAttribute("checked")) { 
       checkNum++; 
      } 
     } 

     if (checkNum >= 2) return; // reject 
    } 

    // toggle the check status 
    checked = !checked; 
    this.setAttribute("checked", checked ? "true" : ""); 
    this.classList.toggle("prime-bg", checked); 
    this.classList.toggle("prime-clr", checked); 
}; 

Answer 2

jQueryのオプションである場合は、ここソリューションです：

let $checkboxes = $("input[type=checkbox]") 
 
\t 
 
$checkboxes.click(() => { 
 
    $checkboxes.attr("disabled", false) 
 
    if ($("input[type=checkbox]:checked").length == 2) { 
 
    $("input[type=checkbox]:not(:checked)").attr("disabled", true) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Can check only 2 checkboxes</h2> 
 
<br/> 
 
<input type="checkbox"/><span>Checkbox 1</span><br/> 
 
<input type="checkbox"/><span>Checkbox 2</span><br/> 
 
<input type="checkbox"/><span>Checkbox 3</span><br/> 
 
<input type="checkbox"/><span>Checkbox 4</span><br/> 
 
<input type="checkbox"/><span>Checkbox 5</span><br/> 
 
<input type="checkbox"/><span>Checkbox 6</span><br/> 
 
<input type="checkbox"/><span>Checkbox 7</span><br/> 
 
<input type="checkbox"/><span>Checkbox 8</span><br/> 
 
<input type="checkbox"/><span>Checkbox 9</span><br/> 
 
<input type="checkbox"/><span>Checkbox 10</span><br/>