禁用未经检查的无线电的提交按钮

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

Answer 1

尝试这个！ 希望能帮助到你。 即使提交按钮将处于活动状态。 在填写完所有字段之前，表单不会提交。

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

Answer 2

这应该工作。 它有一个小bug，当一切都有效时，你必须在提交按钮更新之前更新其中一个输入。 除此之外，它工作正常。

 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> 

小提琴