disable button when radio input not selected

Question

I have a simple form like this:

<form action="url" method="post">
     <input name="id" type="radio" value="1">
     <input name="id" type="radio" value="2">
     <button type="submit">Submit</button>
</form>

How can I disable the button when any radio input not selected?

Answer 1

you can do it same as follow:

 radioHandler = (e)=>{ if($(e).prop("checked")){ $("#submitBtn").removeAttr('disabled') } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="url" method="post"> <input name="id" type="radio" value="1" onclick="radioHandler(this)"> <input name="id" type="radio" value="2" onclick="radioHandler(this)"> <button type="submit" id="submitBtn" disabled>Submit</button> </form>

Answer 2

You can check the length of checked radio button on clicking like the following way:

 //get all the radio buttons var radios = document.querySelectorAll('input[type=radio]'); //get only the checked radio button var checked = document.querySelectorAll('input[type=radio]:checked'); //get the submit button var btn = document.querySelector('[type=submit]'); //disable the button on page load by checking the length if(!checked.length){ btn.setAttribute("disabled", "disabled"); } //attach the event handler to all the radio buttons with forEach and addEventListener radios.forEach(function(el){ el.addEventListener('click', function(){ checked = document.querySelectorAll('input[type=radio]:checked'); if(checked.length){ //enable the button by removing the attribute btn.removeAttribute("disabled"); } }); });

 <form action="url" method="post"> <input name="id" type="radio" value="1"> <input name="id" type="radio" value="2"> <button type="submit">Submit</button> </form>

Answer 3

Pure Javascript

<form action="url" method="post" >
     <input class="js-radioInput" name="id" type="radio" value="1">
     <input  class="js-radioInput" name="id" type="radio" value="2">
     <button id="my_button" type="submit" disabled>Submit</button>
</form>

var inputElems = document.getElementsByClassName("js-radioInput");
for (var i = inputElems.length - 1; i >= 0; --i) {
  var elem = inputElems[i];
  elem.onchange = function () {
    document.getElementById("my_button").removeAttribute("disabled");
  };
}

Answer 4

set id to the submit button and set disabled. like this:

<form action="url" method="post">
  <input name="id" type="radio" value="1">
  <input name="id" type="radio" value="2">
  <button type="submit" id="btn_submit" disabled>Submit</button>
</form>

and then add javascript code.

document.getElementsByName('id').forEach(item => {
  if(item.checked)
    document.getElementById('btn_submit').disabled = false;
});

Answer 5

A simple function like the following could be useful.

function checkButtonState() {
  let input = document.querySelectorAll('input[type="radio"]');
  let readInput = () => {
    let button = document.querySelector('button');
    document.querySelector('input[type="radio"]:checked') && document.querySelector('input[type="radio"]:checked').value == 2 ? button.removeAttribute('disabled') : button.setAttribute('disabled', true);
  }
  readInput();
  input.forEach((v) => {
    v.addEventListener('click', readInput);
  });
} 

You can try out, the button will be enabled only when the second radio button is checked:

 function checkButtonState() { let input = document.querySelectorAll('input[type="radio"]'); let readInput = () => { let button = document.querySelector('button'); document.querySelector('input[type="radio"]:checked') && document.querySelector('input[type="radio"]:checked').value == 2 ? button.removeAttribute('disabled') : button.setAttribute('disabled', true); } readInput(); input.forEach((v) => { v.addEventListener('click', readInput); }); } checkButtonState();

 <form action="url" method="post"> <input name="id" type="radio" value="1"> <input name="id" type="radio" value="2"> <button type="submit">Submit</button> </form>

Additionally you could pass the value of the radio in the function arguments.

function checkButtonState(value) {
  let input = document.querySelectorAll('input[type="radio"]');
  let readInput = () => {
    let button = document.querySelector('button');
    document.querySelector('input[type="radio"]:checked') && document.querySelector('input[type="radio"]:checked').value == value ? button.removeAttribute('disabled') : button.setAttribute('disabled', true);
  }
  readInput();
  input.forEach((v) => {
    v.addEventListener('click', readInput);
  });
}