Ich baue mehrere Checkboxen. Ich möchte die Funktionalität hinzufügen

Question

Ich baue mehrere Kontrollkästchen. Ich möchte die Funktionalität hinzufügen, wo in einer Gruppe ein Kontrollkästchen nur ein Kontrollkästchen mit einem richtigen oder falschen Wert überprüft werden sollte. Nach dem Auswählen aller Gruppen sollte die Schaltfläche "submit" aktiviert sein. Nach dem Klicken auf submit button sollte der Wert jeder Gruppe angezeigt werden (richtige oder falsche Antwort). Wie soll ich das machen?

function isChecked(checkbox, sub1) { 
 
    document.getElementById(sub1).disabled = !checkbox.checked; 
 
} 
 

 

 
$("input:checkbox").on('click', function() { 
 
    var $box = $(this); 
 
    if ($box.is(":checked")) { 
 
     var group = "input:checkbox[name='" + $box.attr("name") + "']"; 
 
     $(group).prop("checked", false); 
 
     $box.prop("checked", true); 
 
     //alert("checked"); 
 

 
    } else { 
 
     $box.prop("checked", false); 
 
    } 
 

 
    var bool; 
 
    $("input.checkbox").change(function() { 
 
     bool = $(".checkbox:not(:checked)").length != 6; 
 

 
     // enable/disable 
 
     $("#submitbutton").prop('disabled', bool).addClass('btn'); 
 

 
     // $("#submitbutton").removeAttr("disabled", bool).addClass("btn"); 
 
     //$('#submitbutton').removeClass('btn1').prop(':disabled', bool).addClass('btn'); 
 
     <!-- \t \t alert('right')--> 
 
    }).change('color'); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<input type="checkbox" class="checkbox checkbox_1" id="button0" name="fooby[0][]" value="chk0" /> 
 
<input type="checkbox" class="checkbox checkbox_1" id="button1" name="fooby[0][]" value="chk0" /> 
 
<br> 
 

 
<input type="checkbox" class="checkbox checkbox_1" id="button2" name="fooby[1][]" value="chk1" /> 
 
<input type="checkbox" class="checkbox checkbox_1" id="button3" name="fooby[1][]" value="chk2" /><br> 
 

 
<input type="checkbox" class="checkbox checkbox_1" id="button4" name="fooby[2][]" value="chk3" /> 
 
<input type="checkbox" class="checkbox checkbox_1" id="button5" name="fooby[2][]" value="chk4" /> 
 
<br> 
 

 
<input type="checkbox" class="checkbox checkbox_1" id="button6" name="fooby[3][]" value="chk5" /> 
 
<input type="checkbox" class="checkbox checkbox_1" id="button7" name="fooby[3][]" value="chk6" /> 
 
<br> 
 

 
<input type="checkbox" class="checkbox checkbox_1" id="button8" name="fooby[4][]" value="chk7" /> 
 
<input type="checkbox" class="checkbox checkbox_1" id="button9" name="fooby[4][]" value="chk8" /> 
 
<br> 
 

 
<input type="checkbox" class="checkbox checkbox_1" id="button10" name="fooby[5][]" value="chk9" /> 
 
<input type="checkbox" class="checkbox checkbox_1" id="button11" name="fooby[5][]" value="chk10" /> <br> 
 

 
<input type="submit" value="Submit" id="submitbutton" disabled="disabled" class="btn" />

Answer 1

Wie in den Kommentaren angegeben können Sie RadioButton statt Checkbox dies für die Überprüfung stopft wird Griff verwenden. Um jedoch zu ermöglichen, die submit Taste haben Sie einige Mathematik zu tun, durch die Überprüfung, ob die Anzahl der geprüften Radiobuttons die Hälfte der Gesamtzahl der Radiobuttons ist:

if($("input[type='radio']").length/2==$("input[type='radio']:checked").length) 
{ 
$(".btn").prop("disabled",""); 
} 

Schließlich ist hier eine Demo:

$("input[type='radio']").on("change",function(){ 
 
if($("input[type='radio']").length/2==$("input[type='radio']:checked").length) 
 
{ 
 
$(".btn").prop("disabled",""); 
 
} 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<input type="radio" class="checkbox checkbox_1" id="button0" name="fooby[0][]" value="chk0" /> 
 
    \t <input type="radio" class="checkbox checkbox_1" id="button1" name="fooby[0][]" value="chk0" /> 
 
    <br> 
 

 
    <input type="radio" class="checkbox checkbox_1" id="button2" name="fooby[1][]" value="chk1" /> 
 
    <input type="radio" class="checkbox checkbox_1" id="button3" name="fooby[1][]" value="chk2" /><br> 
 

 
    \t <input type="radio" class="checkbox checkbox_1" id="button4" name="fooby[2][]" value="chk3" /> 
 
    \t <input type="radio" class="checkbox checkbox_1" id="button5" name="fooby[2][]" value="chk4" /> 
 
    <br> 
 

 
    <input type="radio" class="checkbox checkbox_1" id="button6" name="fooby[3][]" value="chk5" /> 
 
    \t <input type="radio" class="checkbox checkbox_1" id="button7" name="fooby[3][]" value="chk6" /> 
 
      <br> 
 

 
    <input type="radio" class="checkbox checkbox_1" id="button8" name="fooby[4][]" value="chk7" /> 
 
    \t <input type="radio" class="checkbox checkbox_1" id="button9" name="fooby[4][]" value="chk8" /> 
 
       <br> 
 

 
    <input type="radio" class="checkbox checkbox_1" id="button10" name="fooby[5][]" value="chk9" /> 
 
    \t <input type="radio" class="checkbox checkbox_1" id="button11" name="fooby[5][]" value="chk10" /> <br> 
 
    
 
\t <input type="submit" value="Submit" id="submitbutton" disabled="disabled" class="btn"/>

Answer 2

<FORM NAME=MAIN> 

<SCRIPT> 

HTML = []; 
function PRINT(L, X) { HTML.push(L.split("#").join(X)); } 
function FLUSH() { document.write(HTML.join("")); HTML = []; } 

COOKIE = "ANSWERS"; 
function SetCookie(NAME, VALUE) { var E = new Date(); E.setFullYear(E.getFullYear() + 5); document.cookie = NAME + "=" + VALUE + ";Expires=" + E.toGMTString(); } 
function GetCookie(NAME) { var i, e, s, K = document.cookie.split(";"); for (i = 0; i < K.length; i++) { for (s = 0; K[i].charCodeAt(s) < 33; s++); e = K[i].indexOf("="); if (K[i].substring(s, e) == NAME) return K[i].slice(++e); } return ""; } 

BOX_COLOR = "0033CC"; 
TEXT_COLOR = "FFFFFF"; 
ROW_COLORS = "111133 333355".split(" "); 
Q = "Do you speak English?|Do you have an Apple iPhone X ?|Do you write JavaScript?|Have you ever caught an alligator?|Did you eat it?|Do you like winter?|Is the earth big?|Zero equals false. Agree?|Does your laptop run on 19 volts?".split("|"); 

ANSWER = GetCookie(COOKIE); 
if (ANSWER && ANSWER != null) ANSWER = ANSWER.split(","); else ANSWER = []; 
for (i = ANSWER.length; i < Q.length; i++) ANSWER.push(0); 

PRINT("<TABLE CELLSPACING=1 CELLPADDING=7 BGCOLOR=#>", BOX_COLOR); 
PRINT("<TR><TD>#True<TD>#False<TD>#Questions", "<FONT COLOR=" + TEXT_COLOR + ">"); 
for (i = 0; i < Q.length; i++) 
{ 
    PRINT("<TR BGCOLOR=#>", ROW_COLORS[i&1]); 
    PRINT("<TD><CENTER><INPUT "+(ANSWER[i]==1?"CHECKED":"")+" NAME=X#A TYPE=CHECKBOX onClick='K(#, 1);'>", i); 
    PRINT("<TD><CENTER><INPUT "+(ANSWER[i]==2?"CHECKED":"")+" NAME=X#B TYPE=CHECKBOX onClick='K(#, 2);'>", i); 
    PRINT("<TD onClick='K(#, 0);'><FONT COLOR="+TEXT_COLOR+">"+(i+1)+". " + Q[i], i); 
} 
PRINT("</TABLE><P>"); 
PRINT("<INPUT TYPE=BUTTON VALUE=' Get Answers ' onClick='alert(ANSWER);'>"); 
PRINT("<INPUT TYPE=BUTTON VALUE=' Delete Answers ' onClick='DeleteAnswers();'>"); 
PRINT("<INPUT TYPE=BUTTON "+(isComplete()?"":"DISABLED")+" NAME=NEXT VALUE=' NEXT ' onClick='Next();' onMouseOver='CheckAnswers();'>"); 
FLUSH(); 

function K(N, V) // Click event handler 
{ 
    var A = 1; 
    if (ANSWER[N] == 1 || (ANSWER[N] == 0 && V == 2)) A = 0; 
    ANSWER[N] = (A) ? 1 : 2; 
    eval("document.MAIN.X"+N+"A.checked = A;"); 
    eval("document.MAIN.X"+N+"B.checked = !A;"); 

    CheckAnswers(); 
    SaveAnswers(); 
} 

function isComplete() { for (var i = 0; i < Q.length; i++) if (ANSWER[i] == 0) return 0; return 1; } 

function AllowNext() { document.MAIN.NEXT.disabled = false; } 

function CheckAnswers() { if (isComplete()) AllowNext(); } 

function Next() { location.href = "http://www.msn.com"; } 

function SaveAnswers() { SetCookie(COOKIE, ANSWER.join(",")); } 

function DeleteAnswers() 
{ 
    for (var i = 0; i < Q.length; i++) 
    { 
    ANSWER[i] = 0; 
    eval("document.MAIN.X"+i+"A.checked = false;"); 
    eval("document.MAIN.X"+i+"B.checked = false;"); 
    } 
    document.MAIN.NEXT.disabled = true; 
    SetCookie(COOKIE, ""); 
} 

</SCRIPT>