Question

我正在构建多个复选框。我想添加功能，在组一个复选框中，只有一个复选框应该使用正确或错误的值进行检查。选择所有组后，应该启用提交按钮。点击提交按钮后，应该显示每个组的值（正确或错误的答案）。我该怎样做呢？

＆＃13;

<span id="user-settings-price-preview-checkbox" class="user-settings-selector-checkbox"></span>

＆＃13;

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');
        <!--		alert('right')-->
    }).change('color');


});

＆＃13;

Answer 1

根据评论中的说明，您可以使用RadioButton代替Checkbox，这将处理您的检查内容。但是，要启用submit按钮，您必须通过验证已检查的单选按钮的数量是否为单选按钮总数的一半来进行数学运算：

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

最后，这是一个演示：

$("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" />   
 	 <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>

  	<input type="radio" class="checkbox checkbox_1" id="button4" name="fooby[2][]" value="chk3" />   
 	 <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" />   
 	 <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" />   
 	 <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" />   
 	 <input type="radio"  class="checkbox checkbox_1" id="button11" name="fooby[5][]" value="chk10" /> <br>
    
	<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>

我正在构建多个复选框。我想添加功能

2 个答案: