Отключить кнопку отправки для неконтролируемого радио не работает

Question

Отключить кнопку отправки для неконтролируемого радио не работает

Я пытаюсь отключить кнопку отправки формы, пока все поля не будут заполнены...

Это работает для других типов полей... НО НЕ ДЛЯ РАДИО

Даже если мы не проверяли радио, кнопка "Отправить" ВКЛЮЧЕНА....

текущий код и jsfiddle следующим образом

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

1

javascript html jquery validation disabled-input

Источник

user3439624 19 апр '16 в 15:05

2 ответа

Другие вопросы по тегам javascript html jquery validation disabled-input

user6150027 19 апр '16 в 19:18 2016-04-19 19:18 · Answer 1 · 2016-04-19 19:18

Это должно работать. В нем есть небольшая ошибка, хотя, когда все верно, вы должны обновить один из входов, прежде чем кнопка подтверждения будет обновлена. Кроме этого, он работает нормально.

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>

скрипка

user2873474 19 апр '16 в 16:42 2016-04-19 16:42 · Answer 2 · 2016-04-19 16:42

Попробуй это! Надеюсь, поможет. даже если кнопка отправки будет активна. Форма не будет отправлена до тех пор, пока не будут заполнены все поля.

<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>