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?

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?

• javascript
• html

• are you add JQuery or not ? – Mehrzad Tejareh Commented Oct 3, 2020 at 11:36
• no, what JQuery code I should add? – Amir Commented Oct 3, 2020 at 11:42
• if my answer helped you. please checked my answer is correct. – Mehrzad Tejareh Commented Oct 3, 2020 at 11:43
• 1 You can do this without JavaScript too, the answers on this post should help you: stackoverflow./questions/8287779/… – tanmay_garg Commented Oct 3, 2020 at 11:48

5 Answers 5

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>

you can do it same as follow:

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

<script src="https://cdnjs.cloudflare./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>

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

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

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