How do I make a button unlock after a person has checked 3 checkboxes?

user_13901310 0
Viewed 86

I have 3 checkboxes in my website, and a button to submit the answers to the questions. How do I make the button disabled by default, and only after the person has checked the 3 checkboxes it would we undisabled? I tried implementing an IF statement, but even after a person has checked at least 1 answer on each checkbox it would still be disabled. Here is a part of my code:

Why is my IF statement not working? thanks in advance!

const colorblind = document.getElementById("colorblindoptions");

const soundyes = document.getElementById("soundyes");
const soundno = document.getElementById("soundno");

const biglettersyes = document.getElementById("biglettersyes");
const biglettersno = document.getElementById("biglettersno");

const explanationyes = document.getElementById("explanationyes");
const explanationno = document.getElementById("explanationno");

const submit = document.getElementById("submit");
const table = document.getElementById("settingstable");
const buttondiv = document.getElementById("buttondiv");
const everythingdiv = document.getElementById("everything");

if ((soundyes.checked == true || soundno.checked == true) && (biglettersyes.checked == true || biglettersno.checked == true) && (explanationyes.checked == true || explanationno.checked == true)) {
    submit.disabled = false;
}
else {
    submit.disabled = true;
}
<table id = "settingstable">
                <tr>
                    <th>
                        Settings
                    </th>
                    <th>
                        Yes
                    </th>
                    <th>
                        No
                    </th>
                </tr>
                <tr>
                    <td>
                        <select name = "colorblind" id = "colorblindoptions">
                            <option value = "nocolorblind"> I'm not colorblind </option>
                            <option value = "achromatopsia"> Achromatopsia </option>
                            <option value = "monoachromatopsia"> Monoachromatopsia </option>
                            <optgroup label = "Dichromacy">
                                <option value = "deuteranopia"> Deuteranopia </option>
                                <option value = "tritanopia"> Tritanopia </option>
                            </optgroup>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p class = "text">
                            Would you like voice-sound?
                        </p>
                    </td>
                    <td>
                        <input type = "radio" id = "soundyes" name = "sound" value = "soundyes">
                    </td>
                    <td>
                        <input type = "radio" id = "soundno" name = "sound" value = "soundno">
                    </td>
                </tr>
                <tr>
                    <td>
                        <p class = "text">
                            Would you like big letters?
                        </p>
                    </td>
                    <td>
                        <input type = "radio" id = "biglettersyes" name = "bigletters" value = "biglettersyes">
                    </td>
                    <td>
                        <input type = "radio" id = "biglettersno" name = "bigletters" value = "biglettersno">
                    </td>
                </tr>
                <tr>
                    <td>
                        <p class = "text">
                            Would you like explanations on pictures?
                        </p>
                    </td>
                    <td>
                        <input type = "radio" id = "explanationyes" name = "explanation" value = "explanationyes">
                    </td>
                    <td>
                        <input type = "radio" id = "explanationno" name = "explanation" value = "explanationno">
                    </td>
                </tr>
            </table>
            <div id = "buttondiv">
                <button id = "submit"> Submit </button>
            </div>

html javascript
3 Answers

You have a bit of code which says "if three inputs are checked, enable the submit button". We can get your desired result by sticking this code into a function (called checkSubmitEnabled), and calling the function every time a click occurs.

const soundyes = document.getElementById("soundyes");
const soundno = document.getElementById("soundno");

const biglettersyes = document.getElementById("biglettersyes");
const biglettersno = document.getElementById("biglettersno");

const explanationyes = document.getElementById("explanationyes");
const explanationno = document.getElementById("explanationno");

const submit = document.getElementById("submit");
const table = document.getElementById("settingstable");
const buttondiv = document.getElementById("buttondiv");
const everythingdiv = document.getElementById("everything");

let checkSubmitEnabled = () => {
  
  let enabled = true
    && (soundyes.checked == true || soundno.checked == true)
    && (biglettersyes.checked == true || biglettersno.checked == true)
    && (explanationyes.checked == true || explanationno.checked == true);
  
  submit.disabled = !enabled;
};

soundyes.addEventListener('input', checkSubmitEnabled);
biglettersyes.addEventListener('input', checkSubmitEnabled);
explanationyes.addEventListener('input', checkSubmitEnabled);
soundno.addEventListener('input', checkSubmitEnabled);
biglettersno.addEventListener('input', checkSubmitEnabled);
explanationno.addEventListener('input', checkSubmitEnabled);

// Run the function to get the initial state
checkSubmitEnabled();
<table id = "settingstable">
  <tr>
    <th>Settings</th>
    <th>Yes</th>
    <th>No</th>
  </tr>
  <tr>
    <td>
      <select name = "colorblind" id = "colorblindoptions">
        <option value = "nocolorblind"> I'm not colorblind </option>
        <option value = "achromatopsia"> Achromatopsia </option>
        <option value = "monoachromatopsia"> Monoachromatopsia </option>
        <optgroup label = "Dichromacy">
          <option value = "deuteranopia"> Deuteranopia </option>
          <option value = "tritanopia"> Tritanopia </option>
        </optgroup>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <p class = "text">Would you like voice-sound?</p>
    </td>
    <td><input type = "radio" id = "soundyes" name = "sound" value = "soundyes"></td>
    <td><input type = "radio" id = "soundno" name = "sound" value = "soundno"></td>
  </tr>
  <tr>
    <td>
      <p class = "text">Would you like big letters?</p>
    </td>
    <td><input type = "radio" id = "biglettersyes" name = "bigletters" value = "biglettersyes"></td>
    <td><input type = "radio" id = "biglettersno" name = "bigletters" value = "biglettersno"></td>
  </tr>
  <tr>
    <td>
      <p class = "text">Would you like explanations on pictures?</p>
    </td>
    <td><input type = "radio" id = "explanationyes" name = "explanation" value = "explanationyes"></td>
    <td><input type = "radio" id = "explanationno" name = "explanation" value = "explanationno"></td>
  </tr>
</table>
<div id = "buttondiv">
   <button id = "submit"> Submit </button>
</div>

user_8309050

Not an answer. But You should check if your checkbox is checked by using input name. That should work

var checkedSound = [...document.getElementsByName("sound")].some(c=>c.checked);
var checkedBigletters = [...document.getElementsByName("bigletters")].some(c=>c.checked);
var checkedExplanation = [...document.getElementsByName("explanation")].some(c=>c.checked);

// if all true then enable button
user_139682930

Wrap it around a div and set the button to disabled by default and then use event listener to trigger action

const soundyes = document.getElementById("soundyes");
const soundno = document.getElementById("soundno");

const biglettersyes = document.getElementById("biglettersyes");
const biglettersno = document.getElementById("biglettersno");

const explanationyes = document.getElementById("explanationyes");
const explanationno = document.getElementById("explanationno");
const radio=document.getElementById("radio")
const submit = document.getElementById("submit");
const table = document.getElementById("settingstable");
const buttondiv = document.getElementById("buttondiv");
const everythingdiv = document.getElementById("everything");

radio.addEventListener("change",()=>{
if ((soundyes.checked == true || soundno.checked == true) && (biglettersyes.checked == true || biglettersno.checked == true) && (explanationyes.checked == true || explanationno.checked == true)) {
    submit.disabled = false;
}
else {
    submit.disabled = true}
})
 <div id="radio">      
                      <input type = "radio" id = "soundyes" name = "sound" value = "soundyes">
                    </td>
                    <td>
                        <input type = "radio" id = "soundno" name = "sound" value = "soundno">
                    </td>
                </tr>
                <tr>
                    <td>
                        <p class = "text">
                            Would you like big letters?
                        </p>
                    </td>
                    <td>
                        <input type = "radio" id = "biglettersyes" name = "bigletters" value = "biglettersyes">
                    </td>
                    <td>
                        <input type = "radio" id = "biglettersno" name = "bigletters" value = "biglettersno">
                    </td>
                </tr>
                <tr>
                    <td>
                        <p class = "text">
                            Would you like explanations on pictures?
                        </p>
                    </td>
                    <td>
                        <input type = "radio" id = "explanationyes" name = "explanation" value = "explanationyes">
                    </td>
                    <td>
                        <input type = "radio" id = "explanationno" name = "explanation" value = "explanationno">
                    </td>
                </tr>
            </table>
            <div id = "buttondiv">
                <button id = "submit" disabled> Submit </button>
            </div>
  </div>

user_99220110
Related