[英]jQuery HTML 5 require field if radio button checked
我有一个带有一些单选按钮的表单，如果选中了一个单选按钮，则需要一些字段。
我在单选按钮组上具有HTML5 required属性，该属性可以正常工作，但是如果选中了相应的单选按钮，我希望某些文本字段是必需的。
我写了一些JS似乎无效，并且在选中单选按钮时似乎没有添加required属性。
HTML：
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>MooWoos Stall Booking</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
<!--endbuild-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address: </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number: </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book?: </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input type="radio" name="c-rail" value="Yes" /> Yes
<input type="radio" name="c-rail" value="No" /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>
<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
main.js JS文件：
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
$('#stallType-Business').change(function () {
if(this.checked) {
$('#bizName').attr('required');
} else {
$('#bizName').removeAttr('required');
}
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});
看看JQuery的.prop（）方法...
...并从...看这个例子
<body>
<form action="" method="post">
<label for="required_later">Required if Option2 selected</label>
<input type="text" name="text_input_field" id="required_later" disabled><br>
<input type="radio" id="option1" name="radio_options" value="option1">
<label for="option1">Option1</label><br>
<input type="radio" id="option2" name="radio_options" value="option2">
<label for="option2">Option2</label><br>
<input type="submit" name="submit" value="Submit">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#option1").click(function() {
$("#required_later").prop("required", false);
$("#required_later").prop("disabled", true);
});
$("#option2").click(function() {
$("#required_later").prop("required", true);
$("#required_later").prop("disabled", false);
$("#required_later").focus();
});
</script>
</body>
您可以这样操作，即禁用所有输入，然后仅激活所选的输入。 它要求您一开始就将“禁用”道具添加到所有子项输入中。 我还为c-rail输入添加了ID。
请注意，当您选择另一个单选按钮时，您所做的检查不会触发，这就是为什么在选择一个新按钮时应禁用其他检查。
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
在这里起作用的是disableAll（）函数。
function disableAll() { $('#c-rail-yes').attr('required', false).attr('disabled', true); $('#c-rail-no').attr('required', false).attr('disabled', true); $('#craftName').attr('required', false).attr('disabled', true); $('#bizName').attr('required', false).attr('disabled', true); } $('#stallType-Preloved').change(function () { if(this.checked) { disableAll(); $('#c-rail-yes').attr('required', true).attr('disabled', false); $('#c-rail-no').attr('required', true).attr('disabled', false); } }); $('#stallType-Craft').change(function () { if(this.checked) { disableAll(); $('#craftName').attr('required', true).attr('disabled', false); } }); $('#stallType-Business').change(function () { if(this.checked) { disableAll(); $('#bizName').attr('required', true).attr('disabled', false); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="bookingForm"> <div class="form-group"> <label>What type of stall do you require?</label> <div> <input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required> <label for="stallType-Preloved">Preloved</label> <div class="reveal-if-active"> <label for="c-rail">Will you be bringing a clothes rail?: </label> <input id="c-rail-yes" type="radio" name="c-rail" value="Yes" disabled /> Yes <input id="c-rail-no" type="radio" name="c-rail" value="No" disabled /> No </div> </div> <div> <input type="radio" name="stallType" id="stallType-Craft" value="Craft"> <label for="stallType-Craft">Craft</label> <div class="reveal-if-active"> <label for="craftName">What name do you use?</label> <input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" disabled /> </div> </div> <div> <input type="radio" name="stallType" id="stallType-Business" value="Business"> <label for="stallType-Business">Business</label> <div class="reveal-if-active"> <label for="bizName">What is your business name?</label> <input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" disabled /> </div> </div> </div> </form>
另一种方法是使用此功能：
$('.input-radio').change(function () {
$('div.reveal-if-active').children('input').removeAttr('required');
$(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});
并将class="input-radio"到您要完成此工作的输入中。
var $form = $('form#bookingForm'), url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec' $('.input-radio').change(function () { $('div.reveal-if-active').children('input').removeAttr('required'); $(this).parent().children('div.reveal-if-active').children('input').attr('required', true); }); $('#submit-form').on('click', function(e) { var valid = this.form.checkValidity(); if (valid) { e.preventDefault(); var jqxhr = $.ajax({ url: url, method: "GET", dataType: "json", data: $form.serializeObject(), success: function () { $('#redirect_page').modal('show'); window.setTimeout(function () { location.reload() }, 3000); } }); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <nav class="navbar navbar-toggleable-md navbar-light"> <a class="logo"><img src="assets/logo_opt.png"></a> </nav> <hr> <div class="modal fade" id="redirect_page" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="form-horizontal"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3 bookingform"> <h1>Stall Booking Form</h1> <p class="lead"> Fill out the form to book and pay for your stall! </p> <form id="bookingForm"> <div class="form-group"> <label for="name">Name: </label> <input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/> </div> <div class="form-group"> <label for="address">Address: </label> <textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea> </div> <div class="form-group"> <label for="phone">Telephone Number: </label> <input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/> </div> <div class="form-group"> <label for="email">Email: </label> <input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/> </div> <div class="form-group"> <label for="date">Which date would you like to book?: </label> <p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p> <p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p> </div> <div class="form-group"> <label>What type of stall do you require?</label> <div> <input class="input-radio" type="radio" name="stallType" id="stallType-Preloved" value="Preloved" /> <label for="stallType-Preloved">Preloved</label> <div class="reveal-if-active"> <label for="c-rail">Will you be bringing a clothes rail?: </label> <input type="radio" name="c-rail" value="Yes" /> Yes <input type="radio" name="c-rail" value="No" /> No </div> </div> <div> <input class="input-radio" type="radio" name="stallType" id="stallType-Craft" value="Craft"> <label for="stallType-Craft">Craft</label> <div class="reveal-if-active"> <label for="craftName">What name do you use?</label> <input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" /> </div> </div> <div> <input type="radio" class="input-radio" name="stallType" id="stallType-Business" value="Business"> <label for="stallType-Business">Business</label> <div class="reveal-if-active"> <label for="bizName">What is your business name?</label> <input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" /> <label for="insurance">Do you have Public Liability Insurance?</label> <input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes <input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No </div> </div> </div> <input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" /> </form> </div> </div> <hr> <footer> <div class="row"> <div class="col-lg-12"> <p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p> </div> </div> </footer> </div>
如果使用 jQuery Validate 检查某个单选按钮，如何要求字段？
[英]How to require fields if a certain radio button is checked with jQuery Validate?
根据 label html 使用 jquery 更改单选按钮选中属性
[英]change radio button checked attribute on basis of label html using jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.