vendredi 4 septembre 2020

Disable checkboxes only

Hi I am using the code below which I found on this site and it works perfectly.

I have a 25 question quiz made up of radio controls and check boxes.

I have an issue if on the same page i have radio controls as well as check boxes. The code below counts both of these but I only want it to count the checked checkboxes.

Currently once I hit the max answers I cannot answer the remaining radio control questions, or radio controls before the checkbox count towards the max answers. The code also disables both raido controls and checkboxes so I'd like to find a way to make it only disable the check boxes.

I could split the code up into even more divs but that is going to get very complicated as my jquery controls the flow of the quiz using the divs

    $("input[type=checkbox]").click(function (e) {
        if ($(e.currentTarget).closest("div.question").length > 0) {
            disableInputs($(e.currentTarget).closest("div.question")[0]);        
        }
    });
});

function disableInputs(questionElement) {
    console.log(questionElement);
    if ($(questionElement).data('max-answers') == undefined) {
        return true;
    } else {
        maxAnswers = parseInt($(questionElement).data('max-answers'), 10); 
        if ($(questionElement).find(":checked").length >= maxAnswers) {

 $(questionElement).find(":not(:checked)").attr("disabled", true);
        } else {
            $(questionElement).find("input[type=checkbox]").attr("disabled", false);
        }
    }
}

Here is a snippet of the main quiz

<div class="Q8 question" data-max-answers="3">
<h2>Access Control Questions</h2><br>


<strong>Is it ok to share the door access code?</strong><br>
<input type="radio" id="ac1" name="access1" value="0">Yes<br>
<input type="radio" id="ac2" name="access1" value="1">No<br><br>


<br><strong><label for="access1">From the list below select those that are the aims of an Access Control System (Maximum of 3) </strong></span></label><br>
<input type="checkbox" id="ac3" name="access"  value="1" /> To ensure only authorised users have access to our systems</p>
<input type="checkbox" id="ac4" name="access"  value="1" /> To protect physical access to our offices</p>
<input type="checkbox" id="ac4a" name="access" value="0" /> To give you access to other users passwords</p>
<input type="checkbox" id="ac5" name="access"  value="1" /> To ensure users have access to systems they require access too</p>


<br><strong>A client is visiting and asks to use your computer, what should you do?</strong><br>
<input type="radio" id="ac6" name="access5" value="0">Let them use your computer because they are a client so can do what they wish<br>
<input type="radio" id="ac7" name="access5" value="1">Politely say you are not allowed to do that and refer them to the manager they have come to visit<br>
<input type="radio" id="ac8" name="access5" value="0">Pretend to be on a call and hope they go away<br><br>

</div>

<div class="Q8a">
    
<input id="Q8PrevBut" type="button" Value="Back">   
        <input id="Q8NextBut" type="button" Value="Next">   
</div>

Thanks in advance for your help.




Aucun commentaire:

Enregistrer un commentaire