Question

我有一个有两个部分的表格。第一部分有文本字段，单选按钮，选择框。第二部分只有文本字段。我在页面加载时禁用了第二部分。我只在页面加载时显示第一部分。我只想在第一部分填写所有字段时才显示第二部分。为此，我使用了jquery代码，但这不适用于无线电类型和选择框：

$('.profile-user-personal-form input[type="text"], .profile-user-personal-form input[type="radio"], .profile-user-personal-form select, .profile-user-personal-form input[type="password"]').bind('keyup',function(){

        // get elements that are empty.
        var empty = $('.profile-user-personal-form input[type="text"], .profile-user-personal-form input[type="password"], .profile-user-personal-form input[type="radio"], .profile-user-personal-form select').map(function(index, el) {
            return !$(el).val() ? el : null;

        }).get();

        // could also be placed outside of the function
        var number = $('.user-leaving-info');


        // check if there are any empty elements, if there are none, show numbers, else hide number.
        !empty.length ? number.css({'opacity': 1, 'pointer-events':'auto'}) : number.css({
                'opacity': 0.2,
                'pointer-events' : 'none',
        });
        !empty.length ? $('html , body').animate({
            scrollTop: $(".user-leaving-info").offset().top
        }, 1000) : "";

    });

我的HTML代码如下所示：

<div class="profile-user-personal-form">
    <div class="form-group mr-30">
        <label>First Name</label>
        <div class="form_control field-user-first_name required">
            <input type="text" id="user-first_name" class="form-control first_name" name="User[first_name]" value="">
        </div>      
    </div>
    <div class="form-group">
        <label>Last Name</label>
        <div class="form_control field-user-last_name required">
            <input type="text" id="user-last_name" class="form-control last_name" name="User[last_name]" value="">
        </div>      
    </div>

    <div class="form-group full-width">
        <h6>I am a : </h6>
        <div class="radio-inline field-user-gender required">

            <input type="hidden" name="User[gender]" value="">
                <div id="user-gender">
                    <label class="radio-inline ">
                        <input type="radio" class="genderName" name="User[gender]" value="Male">male
                    </label>
                    <label class="radio-inline ">
                        <input type="radio" class="genderName" name="User[gender]" value="Female">female
                    </label>
                </div>
        </div>      
    </div>

    <div class="form-group full-width">
        <h6>Birthday</h6>
        <div class="select-box-styling">
            <div class="form-group field-user-month">
                <select id="user-month" class="form-control month" name="User[month]">
                    <option value="1">Jan</option>
                    <option value="2">Feb</option>
                    <option value="3">Mar</option>
                    <option value="4">Apr</option>
                    <option value="5">May</option>
                    <option value="6">Jun</option>
                    <option value="7">Jul</option>
                    <option value="8">Aug</option>
                    <option value="9">Sep</option>
                    <option value="10">oct</option>
                    <option value="11">Nov</option>
                    <option value="12">Dec</option>
                </select>
            </div>              
            <div class="form-group field-user-day">

                <select id="user-day" class="form-control day" name="User[day]">

                    <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
                </select>

            </div>               
            <div class="form-group field-user-year">

                <select id="user-year" class="form-control year" name="User[year]">
                    <option value="1998">1998</option>
                    <option value="1997">1997</option>
                </select>
            </div>              
        </div>
    </div>
</div>

有人可以在代码中告诉我这个问题吗？

Answer 1

您犯了两个错误：1。无线电输入和选择框在更改时不会响应'keyup'事件。您需要'change'个事件。 2.在广播中呼叫val()时，它总会返回一个值，但它不会告诉您是否已经过检查，为此使用jQuery＆＃39; {{1} }。用这段代码替换你的代码，它应该工作：

is(':checked')

Jquery检查是否填写了所有输入文本，收音机，选择框

1 个答案: