Disable button not necessary when validating checkboxes

Question

Disable button not necessary when validating checkboxes

I'm working on a simple function that involves 3 checkboxes. The goal is to disable the button if all checkboxes are unchecked, and enable it only when all three checkboxes are checked.

   function checkAll() {
     var checkbox1 = document.getElementById("ch1");
     var checkbox2 = document.getElementById("ch2");
     var checkbox3 = document.getElementById("ch3");
     var submitBtn = document.getElementById("btn");

    if (checkbox1.checked && checkbox2.checked && checkbox3.checked){  
    return submitBtn.disabled = false;
        
  }
  else {
    return submitBtn.disabled = true;
}
   }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>
    <input type="checkbox" id="ch1" >
    <input type="checkbox" id="ch2" >
    <input type="checkbox" id="ch3" >
    <button onclick="checkAll()" id="btn">Submit</button>
</body>
<script>


</script>
</html>

javascript html css

Answer 1

Answer №1

To ensure functionality, it is necessary to attach an EventListener to the checkboxes and monitor any changes in their state rather than embedding the script within a button itself:

let checkboxes = document.querySelectorAll('input[type="checkbox"]');

checkboxes.forEach(el =>
  el.addEventListener('change', function() {
    let checked_checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
    if (checked_checkboxes.length === checkboxes.length) {
      document.querySelector('#btn').removeAttribute('disabled');
    } else {
      document.querySelector('#btn').setAttribute('disabled', true);
    }
  })
)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>
    <input type="checkbox" id="ch1" >
    <input type="checkbox" id="ch2" >
    <input type="checkbox" id="ch3" >
    <button onclick="sub()" id="btn" disabled>Submit</button>
</body>
<script>


</script>
</html>

Answer 2

To ensure functionality, it is necessary to attach an EventListener to the checkboxes and monitor any changes in their state rather than embedding the script within a button itself:

let checkboxes = document.querySelectorAll('input[type="checkbox"]');

checkboxes.forEach(el =>
  el.addEventListener('change', function() {
    let checked_checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
    if (checked_checkboxes.length === checkboxes.length) {
      document.querySelector('#btn').removeAttribute('disabled');
    } else {
      document.querySelector('#btn').setAttribute('disabled', true);
    }
  })
)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>
    <input type="checkbox" id="ch1" >
    <input type="checkbox" id="ch2" >
    <input type="checkbox" id="ch3" >
    <button onclick="sub()" id="btn" disabled>Submit</button>
</body>
<script>


</script>
</html>

Answer 3

Answer №2

To disable your button, you must use a boolean value. The problem lies in how you are interpreting this.checked.

btn.disabled = false;

In addition, if the button is enabled, it will simply be disabled and not rechecked. You should trigger the sub() function on checkbox click.

function sub() {
  var a = document.getElementById("ch1");
  var b = document.getElementById("ch2");
  var c = document.getElementById("ch3");
  var btn = document.getElementById("btn")

  if (a.checked == true && b.checked == true && c.checked == true) {
    btn.disabled = false;
  } else {
    btn.disabled = true;
  }
}

<input onclick="sub()" type="checkbox" id="ch1">
<input onclick="sub()" type="checkbox" id="ch2">
<input onclick="sub()" type="checkbox" id="ch3">
<button id="btn" disabled>Submit</button>

Answer 4

To disable your button, you must use a boolean value. The problem lies in how you are interpreting this.checked.

btn.disabled = false;

In addition, if the button is enabled, it will simply be disabled and not rechecked. You should trigger the sub() function on checkbox click.

function sub() {
  var a = document.getElementById("ch1");
  var b = document.getElementById("ch2");
  var c = document.getElementById("ch3");
  var btn = document.getElementById("btn")

  if (a.checked == true && b.checked == true && c.checked == true) {
    btn.disabled = false;
  } else {
    btn.disabled = true;
  }
}

<input onclick="sub()" type="checkbox" id="ch1">
<input onclick="sub()" type="checkbox" id="ch2">
<input onclick="sub()" type="checkbox" id="ch3">
<button id="btn" disabled>Submit</button>

Answer 5

Answer №3

const checkboxesChecked = () => {
  document.getElementById("ch1").checked = true;
  document.getElementById("ch2").checked = true;
  document.getElementById("ch3").checked = true;
  let checkedCount = 3;
  const allCheckboxes = document.querySelectorAll("input[name=checkbox]");
  
  allCheckboxes.forEach(function(checkbox){
    checkbox.addEventListener('change', function() {
      if (this.checked) {
        console.log("Checkbox is now checked.");
        checkedCount++;
        console.log(checkedCount);
      } else {
        console.log("Checkbox is no longer checked.");
        checkedCount--;
        console.log(checkedCount);
      }
    
      if(checkedCount < 3){
        document.getElementById("btn").disabled = true;
      } else {
        document.getElementById("btn").disabled = false;
      }
    });
  });
}

Answer 6

const checkboxesChecked = () => {
  document.getElementById("ch1").checked = true;
  document.getElementById("ch2").checked = true;
  document.getElementById("ch3").checked = true;
  let checkedCount = 3;
  const allCheckboxes = document.querySelectorAll("input[name=checkbox]");
  
  allCheckboxes.forEach(function(checkbox){
    checkbox.addEventListener('change', function() {
      if (this.checked) {
        console.log("Checkbox is now checked.");
        checkedCount++;
        console.log(checkedCount);
      } else {
        console.log("Checkbox is no longer checked.");
        checkedCount--;
        console.log(checkedCount);
      }
    
      if(checkedCount < 3){
        document.getElementById("btn").disabled = true;
      } else {
        document.getElementById("btn").disabled = false;
      }
    });
  });
}

Disable button not necessary when validating checkboxes

Answer №1

Answer №2

Answer №3

Similar questions

Jupyter QtConsole: Customize default CSS by selecting from built-in options in the configuration settings

Unusual css glitch observed when hovering over a span/link

Tips on how to update a table following each button click during an ajax request

What is the process for adjusting the attribute of a subitem utilized by the `use` element?

Creating a dynamic overlapping image effect with CSS and JavaScript

"Utilizing Typescript and React to set a property's value based on another prop: A step-by

The validity of AngularJS form is constant and always returns true with formName.$valid

Ever since I upgraded my three.js, my code seems to have lost its functionality

Is it possible for a for loop to execute console.log() immediately for each cycle while the remaining part of the loop continues

What is the best way to manage the package-lock.json file during deployment from git using SSH?

Disable the checkbox functionality in Angular

Problem arising from apostrophe usage in Javascript OData request

"JavaScript throws an 'Undefined' error when trying to access a basic

Ways to avoid multiple AJAX requests in PHP interfering with one another when updating the database

Prevent cross-site scripting vulnerabilities by replacing the characters "'<'" and "'>'"

How to Delete Elements from an ngList Array in Angular

What is the best method for playing raw audio wav files directly in a web browser?

Having difficulty handling text overflow in Angular4 and HTML

Looking for assistance with converting a basic script into a Joomla 2.5 module and resolving issues with Java integration

Having trouble retrieving a customized header from the HTTP response