I am in the process of creating several checkboxes and am looking to incorporate some added functionality

Currently, I am working on a project that involves creating multiple checkboxes. My goal is to implement a specific functionality where only one checkbox can be checked in each group with the correct or incorrect value. Once all groups have been selected, the submit button should become enabled. When the submit button is clicked, the values of each group (right or wrong answer) should be displayed. How should I approach implementing this? 

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

});
<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" />

javascriptjquerycssarrayshtml

Answer №1

Instead of using Checkbox, you can opt for RadioButton as mentioned in the comments. This will automatically handle the checking process. However, to activate the submit button, you need to perform a calculation. You have to determine if half of the total number of radio buttons are checked:

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

Here is a demonstration:

$("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

<SECTION ID=PRIMARY>

<SCRIPT>

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

COOKIE = "RESPONSES";
function StoreCookie(NAME, VALUE) { var E = new Date(); E.setFullYear(E.getFullYear() + 5); document.cookie = NAME + "=" + VALUE + ";Expires=" + E.toGMTString(); }
function RetrieveCookie(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 = "003366";
TEXT_COLOR = "FFFFCC";
ROW_COLORS = "334455 667788".split(" ");
QUESTIONS = "Can you play the piano?|Do you wear glasses?|Have you ever traveled to Europe?|Is pizza your favorite food?|Are you a morning person?|Do you enjoy hiking?|Have you seen the Northern Lights?|Agree or disagree: Music is universal.|Do you like spicy food?|Did you participate in a marathon before?".split("|");

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

DISPLAY("<TABLE CELLSPACING=1 CELLPADDING=7 BGCOLOR=#>", BOX_COLOR);
DISPLAY("<TR><TD>#True<TD>#False<TD>#Questions", "<FONT COLOR=" + TEXT_COLOR + ">");
for (i = 0; i < QUESTIONS.length; i++)
{
  DISPLAY("<TR BGCOLOR=#>", ROW_COLORS[i&1]);
  DISPLAY("<TD><CENTER><INPUT "+(ANSWER[i]==1?"CHECKED":"")+" NAME=X#A TYPE=CHECKBOX onClick='SELECT(#, 1);'>", i);
  DISPLAY("<TD><CENTER><INPUT "+(ANSWER[i]==2?"CHECKED":"")+" NAME=X#B TYPE=CHECKBOX onClick='SELECT(#, 2);'>", i);
  DISPLAY("<TD onClick='SELECT(#, 0);'><FONT COLOR="+TEXT_COLOR+">"+(i+1)+". " + QUESTIONS[i], i);
}
DISPLAY("</TABLE><P>");
DISPLAY("<INPUT TYPE=BUTTON VALUE=' Get Responses ' onClick='alert(ANSWER);'>");
DISPLAY("<INPUT TYPE=BUTTON VALUE=' Clear Responses ' onClick='ClearResponses();'>");
DISPLAY("<INPUT TYPE=BUTTON "+(isComplete()?"":"DISABLED")+" NAME=NEXT VALUE=' NEXT ' onClick='Proceed();' onMouseOver='CheckResponses();'>");
FLUSH_CONTENT();

function SELECT(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;");

  CheckResponses();
  SaveResponses();
}

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

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

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

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

function SaveResponses() { StoreCookie(COOKIE, ANSWER.join(",")); }

function ClearResponses()
{
  for (var i = 0; i < QUESTIONS.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;
  StoreCookie(COOKIE, "");
}

</SCRIPT>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a feature on the webpage that allows users to save clicked xy points and display them as text?

Is there a way to incorporate a feature on a website that displays clicked xy points as text, allowing them to be easily copied and pasted? ...

jsonhtmlcanvas

What are the best techniques for distinguishing the selected selector in jQuery?

$('#select_id1, #select_id2, #select_id3').change(function() { // Depending on which select element has changed, 'str' should be set accordingly. // For '#select_id1', 'str' should be equal to 'select_id ...

javascriptjquery

Aligning a block of text containing two varying font sizes in the center

I'm attempting to center a paragraph element with a span inside that has a different font size, causing the alignment to be slightly off. Below is the HTML code: <p class="priceWrap"><span class="moneySign">$</span>60000.50</p> ...

htmlcss

Trigger a JQuery popup by toggling a class with a button

Hey there! I have a modal popup that utilizes an active class. When this class is present, the modal appears, and when it is removed, the modal disappears. I am trying to create a button that, when pressed, will show the modal, and a close button inside th ...

javascriptjqueryhtml

Troubleshooting problem: Scrolling problem in IE7 and IE8 with Lightbox

The lightbox I'm using works flawlessly on all browsers, except for IE. When viewed on IE, it shows triple scroll bars. Here is the CSS code for the iframe: #wrap { float:left; width:800px; height:500px; overflow-x: hidden; overflow-y: scroll; } #co ...

jqueryhtmlcsslightbox

Why isn't the background of the container div at the top when using multiple CSS sheets?

I am revitalizing a dull website and seeking feedback on my template design here: Check out the ideal look It's quite lovely! However, as I attempt to incorporate my background, menu, and footer elements, I seem to be experiencing issues with my con ...

csshtml

"Received 'grunt command not found' error even though I have successfully installed grunt and

Even after installing grunt and grunt cli, I am still encountering a 'command not found' error. { "name": "angulartdd", "version": "1.0.0", "description": "1", "main": "index.js", "scripts": { "test": "echo \"Error: no test sp ...

javascriptnode.jsnpm

Check if two PHP arrays are the mirror image of each other

It seems like a simple task that I might be overlooking, but I need to solve this. This question is related to a class I'm taking, and I don't expect anyone to do the work for me (I won't learn that way). I'm looking for a good starting ...

phparrayscompare

Unleashing the power of real-time communication with XMPP using AngularJS

I am currently working on transitioning the basic XMPP setup using Strophe and JavaScript to AngularJS. .controller('loginCtrl', function(xmppAuth) { xmppAuth.auth(login, password); }) and in service: .service('xmppAuth', f ...

javascriptangularjsxmppstrophe

Triggering a click event on an anchor <a> element

Seeking help with a Javascript event query. I have an <a> tag set up like this: <a id='aTag' href='http://example.com'>Click to redirect</a> When attempting to trigger the click event using: <script> $('#a ...

javascriptjqueryajaxmagentojquery-events

Minimizing the frequency of getElementById calls for the same HTML element

When dealing with repetitive function calls using the same element as a parameter, is it more effective to store the element as a global variable? For instance, imagine a function that is triggered on every key press and takes an element as an argument. ...

javascripthtmlglobal-variablesgetelementbyid

The functionality of aria-expanded is not functioning properly when set to false

Having trouble with the bootstrap accordion feature. When the page loads, the accordions are expanded by default instead of being collapsed. I want them to start collapsed and then expand when clicked. Here is the HTML code: <!DOCTYPE html> &l ...

jqueryhtmlcsstwitter-bootstrapweb-deployment

Experiencing issues with passwords in nodemailer and node

Currently, I am utilizing nodemailer in conjunction with Gmail and facing a dilemma regarding the inclusion of my password. The predicament stems from the fact that my password contains both single and double quotes, for example: my"annoying'password. ...

javascriptnode.jsgmailnodemailer

What is causing the TypeError when trying to set a property on undefined in AngularJS?

I've taken on the challenge of building a microblog app to learn more about angularJS. One thing that's really getting me is trying to understand the differences between service, factory, and provider. After some research, I decided to go with s ...

javascriptweb-applicationsangularjs

Incorporating information collected from a modal form into a table using vue.js

insert code hereThis single page application allows users to input data into a modal, which is then automatically added to a table on the main page. var modal = document.getElementById('modalAdd'); var modalBtn = document.getElementById(' ...

javascripthtmlvue.js

Guide to incorporating WebElement scrolling in Selenium using Java?

I need to implement a scroll function for a table on my webpage rather than scrolling the entire page, so using window.scrollBy is not an option. After attempting to find the container responsible for the scroll functionality in the DOM (with no luck), I ...

javascriptjavaseleniumscroll

Consistent column heights within each row

I currently have Bootstrap implemented on my website and have integrated jQuery to adjust the height of each column to match the tallest one. However, the issue I am facing is that the height adjustment applies globally across the entire page, rather than ...

javascriptjquery

How to adjust the font size and font style for the [pageSizeOption] in mat-paginator

I am having trouble adjusting the font-size of the [pageSizeOptions] in my mat-paginator element in the application. <mat-paginator [pageSizeOptions]="[10, 20, 30]"></mat-paginator> The "10" appears too small compared to the text "items per p ...

htmlcssangularangular-materialpaginator

Is it necessary for a component to disconnect from the socket io server upon unmounting?

Is it best practice for a React component to automatically disconnect from a socket.io server when it unmounts using the useEffect hook? If so, could you provide an example of the syntax for disconnecting a React component from a socket.io server? ...

javascriptnode.jsreactjswebsocketsocket.io

SQL stores Array Input as a static identifier 'Array'

Previously, I was able to save an object in the database. However, now I need to save each individual data in an array within a row. I attempted to use array_column to store a specific set of data in a column, but it ended up saving as the word 'Array ...

javascriptphpvue.js