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?

if my answer helped you. please checked my answer is correct. — Mehrzad Tejareh, Oct 03 '20 at 11:43
You can do this without JavaScript too, the answers on this post should help you: https://stackoverflow.com/questions/8287779/how-to-use-the-required-attribute-with-a-radio-input-field — tanmay_garg, Oct 03 '20 at 11:48

score 2 · Answer 1 · answered Oct 03 '20 at 11:43

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>

score 1 · Answer 2 · answered Oct 03 '20 at 11:42

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>

score 0 · Accepted Answer · answered Oct 03 '20 at 11:45

0

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

answered Oct 03 '20 at 11:45

Can Güven

111
5

And also i need do this work in an another form that use from `` instead button element, in boostrap for disable an tag, we should use from disabled class! can you tell me how can I do it? for example if the radio input not selected, add `disabled` to the `` tag? – Amir Oct 03 '20 at 11:53
1

tag has no disabled attr. You can use pointer-events:none css styling. But you can not use tag for submit form. – Can Güven Oct 03 '20 at 11:58

camper · Answer 4 · 2020-10-19T18:50:45.953

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

score 0 · Answer 5 · answered Oct 03 '20 at 12:44

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

disable button when radio input not selected

5 Answers5