disable submit button for unchecked radio not working

Question

I am trying to disable submit button for form till all fields are entered...

It is working for other field types...BUT NOT FOR RADIO

Even though we didn't check radio, Submit button gets ENABLED....

current code and jsfiddle as follows

var inputs = $("form#myForm input, form#myForm textarea, form#myForm checkbox, form#myForm select");

var validateInputs = function validateInputs(inputs) {
      var validForm = true;
      inputs.each(function(index) {
        var input = $(this);
        if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
          $("#register").attr("disabled", "disabled");
          validForm = false;
        }
      });
      return validForm;
    }


    inputs.each(function() {
      var input = $(this);
      if (input.type === "radio") {
        input.change(function() {
          if (validateInputs(inputs)) {
            $("#register").removeAttr("disabled");
          }
        });
      } else {
        input.keyup(function() {
          if (validateInputs(inputs)) {
            $("#register").removeAttr("disabled");
          }
        });
      }
    });

.link-button-blue {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #002633;
  padding: 10px 16px 10px 16px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  cursor: pointer;
}

.link-button-blue:disabled {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: #333;
  color: #ccc;
  padding: 10px 16px 10px 16px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  cursor: no-drop;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myForm">
  <div class="form-field-input">
    <input type="submit" value="Go To Step 2" id="register" class="link-button-blue" disabled="disabled">
  </div>
<br><br>
<label for="mr"> <input type="radio" name="title" value="Mr" id="mr" /> Mr.</label><br />
<label for="mrs"> <input type="radio" name="title" value="Mrs" id="mrs" /> Mrs.</label><br />
<label for="miss"> <input type="radio" name="title" value="Miss" id="miss" /> Miss</label><br />
<label for="ms"> <input type="radio" name="title" value="Ms" id="ms" /> Ms.</label><br />
<label for="dr"> <input type="radio" name="title" value="Dr" id="dr" /> Dr.</label><br />
<br><br>
  <div class="form-field-label">Full Name :</div>
  <div class="form-field-input">
    <input type="text" value="" name="fname" id="fname" required>
  </div>
  <div class="form-field-label">Address :</div>
  <div class="form-field-input">
    <textarea value="" name="address" id="address" rows="4" pattern=".{15,}" required title="15 characters minimum" required></textarea>
  </div>
  <br>
  <div class="form-field-label">Email :</div>
  <div class="form-field-input">
    <input type="text" value="" name="email" id="email" required>
  </div>
  <br>
  <div class="form-field-label">Mobile :</div>
  <div class="form-field-input">
    <input type="text" value="" maxlength="12" minlength="10" name="mobile" id="mobile" onkeypress="return isNumber(event)" required>
  </div>
  <br>
  <div class="form-field-label">Phone :</div>
  <div class="form-field-input">
    <input type="text" value="" name="phone" id="phone" onkeypress="return isNumber(event)" required>
  </div>
  <div class="form-field-label">Fax :</div>
  <div class="form-field-input">
    <input type="text" value="" name="fax" id="fax" onkeypress="return isNumber(event)">
  </div>

  <div class="form-field-label">Birthdate :</div>
  <div class="form-field-input">
    <input type="text" name="birthdate" id="birthdate" placeholder="Click To Open Calendar" required>
  </div>


  <br>
  <div class="form-field-label">Age :</div>
  <div class="form-field-input">
    <input type="text" value="" name="age" id="age" placeholder="Select Birthdate" required>
  </div>
  <br>
  <div class="form-field-label">Select Questionnaire Catagary :</div>
  <div class="form-field-input">
    <label class="checkbox">
      <input id="select_question_category-0" type="checkbox" name="select_question_category[]" value="General" /> General </label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-1" type="checkbox" name="select_question_category[]" value="Stressfull Life Like - IT/BPO/Management" /> Stressfull Life Like - IT/BPO/Management </label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-2" type="checkbox" name="select_question_category[]" value="Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer" /> Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer </label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-3" type="checkbox" name="select_question_category[]" value="Heredity of Diabetes/Presently Suffering from Diabetes" /> Heredity of Diabetes/Presently Suffering from Diabetes </label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-4" type="checkbox" name="select_question_category[]" value="Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack" /> Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack </label>
    <br>

  </div>
  <br>
  <div class="form-field-label">Gender :</div>
  <div class="form-field-input">
    <select name="gender" id="gender" required>
      <option value="">Select</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
  </div>
  <br>
  <div class="form-field-label"></div>

</form>

JSFIDDLE

I guess this should help you: http://stackoverflow.com/questions/1423777/how-can-i-check-whether-a-radio-button-is-selected-with-javascript — lipp, Apr 19 '16 at 15:25

Jaswinder · Answer 1 · 2016-04-19T16:55:31.193

try this! hope it helps. even though the submit button will be active. the form won't submit until all fields are filled out.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myForm">
  <div class="form-field-input">
    <input type="submit" value="Go To Step 2" id="register" class="link-button-blue">
  </div>
<br><br>
<label for="mr"> <input type="radio" name="title" value="Mr" id="mr" required /> Mr.</label><br />
<label for="mrs"> <input type="radio" name="title" value="Mrs" id="mrs" required /> Mrs.</label><br />
<label for="miss"> <input type="radio" name="title" value="Miss" id="miss" required /> Miss</label><br />
<label for="ms"> <input type="radio" name="title" value="Ms" id="ms" required /> Ms.</label><br />
<label for="dr"> <input type="radio" name="title" value="Dr" id="dr" required /> Dr.</label><br />
<br><br>
  <div class="form-field-label">Full Name :</div>
  <div class="form-field-input">
    <input type="text" value="" name="fname" id="fname" required />
  </div>
  <div class="form-field-label">Address :</div>
  <div class="form-field-input">
    <textarea value="" name="address" id="address" rows="4" pattern=".{15,}" required title="15 characters minimum" required /></textarea>
  </div>
  <br>
  <div class="form-field-label">Email :</div>
  <div class="form-field-input">
    <input type="text" value="" name="email" id="email" required />
  </div>
  <br>
  <div class="form-field-label">Mobile :</div>
  <div class="form-field-input">
    <input type="text" value="" maxlength="12" minlength="10" name="mobile" id="mobile" onkeypress="return isNumber(event)" required />
  </div>
  <br>
  <div class="form-field-label">Phone :</div>
  <div class="form-field-input">
    <input type="text" value="" name="phone" id="phone" onkeypress="return isNumber(event)" required />
  </div>
  <div class="form-field-label">Fax :</div>
  <div class="form-field-input">
    <input type="text" value="" name="fax" id="fax" onkeypress="return isNumber(event)" required />
  </div>

  <div class="form-field-label">Birthdate :</div>
  <div class="form-field-input">
    <input type="text" name="birthdate" id="birthdate" placeholder="Click To Open Calendar" required >
  </div>


  <br>
  <div class="form-field-label">Age :</div>
  <div class="form-field-input">
    <input type="text" value="" name="age" id="age" placeholder="Select Birthdate" required />
  </div>
  <br>
  <div class="form-field-label">Select Questionnaire Catagary :</div>
  <div class="form-field-input">
    <label class="checkbox">
      <input id="select_question_category-0" type="checkbox" name="select_question_category[]" value="General" /> General </label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-1" type="checkbox" name="select_question_category[]" value="Stressfull Life Like - IT/BPO/Management" /> Stressfull Life Like - IT/BPO/Management </label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-2" type="checkbox" name="select_question_category[]" value="Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer" /> Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer </label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-3" type="checkbox" name="select_question_category[]" value="Heredity of Diabetes/Presently Suffering from Diabetes" /> Heredity of Diabetes/Presently Suffering from Diabetes </label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-4" type="checkbox" name="select_question_category[]" value="Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack" /> Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack </label>
    <br>

  </div>
  <br>
  <div class="form-field-label">Gender :</div>
  <div class="form-field-input">
    <select name="gender" id="gender" required />
      <option value="">Select</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
  </div>
  <br>
  <div class="form-field-label"></div>

</form>

score 0 · Answer 2 · answered Apr 19 '16 at 19:18

This should work. It has a small bug though, when everything is valid, you have to update one of the inputs before the submit button will update. Other than that, it works fine.

var inputs = $("form#myForm input, form#myForm textarea, form#myForm checkbox, form#myForm select");

$(function() {
  var radVal = false;
  var validateInputs = function validateInputs(inputs) {
    var validForm = true;
    inputs.each(function(index) {
      var input = $(this);
      var inputType = $(this).attr('type');
      if (inputType === "radio" && input.prop("checked")) {
        radVal = true;
      }
      if (!input.val() || !radVal) {
        $("#register").attr("disabled", "disabled");
        validForm = false;
      }
    });
    return validForm;
  }


  inputs.each(function() {
    var input = $(this);
    var inputType = $(this).attr('type');
    if (inputType === "radio") {
      input.change(function() {
        if (validateInputs(inputs)) {
          $("#register").removeAttr("disabled");
        }
      });
    } else {
      input.keyup(function() {
        if (validateInputs(inputs)) {
          $("#register").removeAttr("disabled");
        }
      });
    }
  });
});

.link-button-blue {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #002633;
  padding: 10px 16px 10px 16px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  cursor: pointer;
}
.link-button-blue:disabled {
  font: bold 14px Arial;
  text-decoration: none;
  background-color: #333;
  color: #ccc;
  padding: 10px 16px 10px 16px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  cursor: no-drop;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myForm">
  <div class="form-field-input">
    <input type="submit" value="Go To Step 2" id="register" class="link-button-blue" disabled="disabled">
  </div>
  <br>
  <br>
  <label for="mr">
    <input type="radio" name="title" value="Mr" id="mr" />Mr.</label>
  <br />
  <label for="mrs">
    <input type="radio" name="title" value="Mrs" id="mrs" />Mrs.</label>
  <br />
  <label for="miss">
    <input type="radio" name="title" value="Miss" id="miss" />Miss</label>
  <br />
  <label for="ms">
    <input type="radio" name="title" value="Ms" id="ms" />Ms.</label>
  <br />
  <label for="dr">
    <input type="radio" name="title" value="Dr" id="dr" />Dr.</label>
  <br />
  <br>
  <br>
  <div class="form-field-label">Full Name :</div>
  <div class="form-field-input">
    <input type="text" value="" name="fname" id="fname" required>
  </div>
  <div class="form-field-label">Address :</div>
  <div class="form-field-input">
    <textarea type="txtbx" value="" name="address" id="address" rows="4" pattern=".{15,}" title="15 characters minimum" required></textarea>
  </div>
  <br>
  <div class="form-field-label">Email :</div>
  <div class="form-field-input">
    <input type="text" value="" name="email" id="email" required>
  </div>
  <br>
  <div class="form-field-label">Mobile :</div>
  <div class="form-field-input">
    <input type="text" value="" maxlength="12" minlength="10" name="mobile" id="mobile" onkeypress="return isNumber(event)" required>
  </div>
  <br>
  <div class="form-field-label">Phone :</div>
  <div class="form-field-input">
    <input type="text" value="" name="phone" id="phone" onkeypress="return isNumber(event)" required>
  </div>
  <div class="form-field-label">Fax :</div>
  <div class="form-field-input">
    <input type="text" value="" name="fax" id="fax" onkeypress="return isNumber(event)">
  </div>

  <div class="form-field-label">Birthdate :</div>
  <div class="form-field-input">
    <input type="text" name="birthdate" id="birthdate" placeholder="Click To Open Calendar" required>
  </div>


  <br>
  <div class="form-field-label">Age :</div>
  <div class="form-field-input">
    <input type="text" value="" name="age" id="age" placeholder="Select Birthdate" required>
  </div>
  <br>
  <div class="form-field-label">Select Questionnaire Catagary :</div>
  <div class="form-field-input">
    <label class="checkbox">
      <input id="select_question_category-0" type="checkbox" name="select_question_category[]" value="General" />General</label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-1" type="checkbox" name="select_question_category[]" value="Stressfull Life Like - IT/BPO/Management" />Stressfull Life Like - IT/BPO/Management</label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-2" type="checkbox" name="select_question_category[]" value="Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer" />Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer</label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-3" type="checkbox" name="select_question_category[]" value="Heredity of Diabetes/Presently Suffering from Diabetes" />Heredity of Diabetes/Presently Suffering from Diabetes</label>
    <br>
    <label class="checkbox">
      <input id="select_question_category-4" type="checkbox" name="select_question_category[]" value="Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack" />Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack</label>
    <br>

  </div>
  <br>
  <div class="form-field-label">Gender :</div>
  <div class="form-field-input">
    <select type="dropdown" name="gender" id="gender" required>
      <option value="">Select</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
  </div>
  <br>
  <div class="form-field-label"></div>

</form>

Fiddle

disable submit button for unchecked radio not working

2 Answers2