Question

我有一个带有一些单选按钮的表单，如果选中单选按钮，我需要一些字段。

我在单选按钮组上有HTML5 <script type="text/javascript"> jQuery(function() { jQuery("#textarea").hide() jQuery("#droplistID").change(function() { jQuery(this).val() == 'select' ? jQuery("#textarea").hide() : jQuery("#textarea").show(); }); }); </script>属性，但工作正常，但如果选中相应的单选按钮，我需要一些文本字段。

我写了一些似乎没有效果的JS，并且在选中单选按钮时似乎没有添加required属性。

HTML：

required

main.js JS文件：

    <!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">&times;</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 &copy; 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>

Answer 1

看一下JQuery的 .prop（）方法......

.prop()

......从...中看一下这个例子。

How to require fields if a certain radio button is checked?

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

Answer 2

您可以这样做，禁用所有输入，然后只激活所选输入。它要求您在开始时将“禁用”道具添加到所有子输入中。我还为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>

Answer 3

另一种方法是使用此功能：

$('.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"添加到您要执行此作业的输入中。

＆＃13;

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

＆＃13;

<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">&times;</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 &copy; MooWoos 2018. Booking Form by Luke Brewerton</p>
            </div>
        </div>

    </footer>

</div>

＆＃13;

如果选中单选按钮，则jQuery HTML 5需要字段

3 个答案: