Question

我的下面的代码似乎工作正常，它显示/隐藏输入字段基于具有禁用输入属性的2个无线电选择，但是对于我的表单中的所有200个字段来说这很难编码。我对此很新，并想知道是否有其他方法可以做到这一点。谢谢你的时间！

            (function($) {
                $.fn.toggleDisabled = function(){
                    return this.each(function(){
                        this.disabled = !this.disabled;
                    });
                };
            })(jQuery);

            $(function(){
                        if($(".comm_rent_option").val()==="rent") {
                        $("#comm_rent_option1_table").show();
                        $('input[name="comm_rent"]').prop('disabled', true);
                        $("#comm_rent_option2_table").hide();
                        $('select[name="comm_rent"]').prop('disabled', false);
            } else if ($(".comm_rent_option").val()==="percent") {
                        $("#comm_rent_option1_table").hide();
                        $('input[name="comm_rent"]').prop('disabled', false);
                        $("#comm_rent_option2_table").show();
                        $('select[name="comm_rent"]').prop('disabled', true);
            }
                $(".comm_rent_option").click(function(){
                    if($(this).val()==="rent") {
                        $("#comm_rent_option1_table").slideToggle("fast");
                        $("#comm_rent_option2_table").slideToggle("fast");
                        $('input[name="comm_rent"]').toggleDisabled();
                        $('select[name="comm_rent"]').toggleDisabled();
            } else if ($(this).val()==="percent") {
                        $("#comm_rent_option1_table").slideToggle("fast");
                        $("#comm_rent_option2_table").slideToggle("fast");
                        $('input[name="comm_rent"]').toggleDisabled();
                        $('select[name="comm_rent"]').toggleDisabled();
            }

                });
            });

这是Jquery的HTML

            <div class="form-group">
                <label class="control-label" for="profile">Rent</label><br>
                <label class="radio-inline">
                    <input type="radio" name="comm_rent_option" class="comm_rent_option" id="comm_rent_option1" value="rent" <?php if ($current_user->comm_rent_option == 'rent') {echo 'checked="checked"';} elseif (!isset($current_user->comm_rent_option)) {echo 'checked="checked"'; } ?> >Month's rent
                </label>
                <label class="radio-inline">
                    <input type="radio" name="comm_rent_option" class="comm_rent_option" id="comm_rent_option2" value="percent" <?php if ($current_user->comm_rent_option == 'percent') echo 'checked="checked"'; ?> >Percentage
                </label>
            </div>
            <select name="comm_rent" id="comm_rent_option1_table" class="form-control quad" style="display:none">
                <?php $comm_rent = get_option( 'user_comm_rent' ); ?>
                <option value="2" <?php if (isset($current_user->comm_rent['2_month'])) echo 'selected'; ?> ><?php echo $comm_rent['2_month'] ; ?></option>
                <option value="1" <?php if (isset($current_user->comm_rent['1_month'])) {echo 'selected';} elseif (!isset($current_user->comm_rent)) {echo 'selected'; } ?> ><?php echo $comm_rent['1_month'] ; ?></option>
                <option value="0.5" <?php if (isset($current_user->comm_rent['half_month'])) echo 'selected'; ?> ><?php echo $comm_rent['half_month'] ; ?></option>
            </select>
            <div id="comm_rent_option2_table" style="display:none">
                <table style="width:100%;table-layout:fixed;">
                    <col width="50%">
                    <col width="50%">
                    <tr>
                        <td valign="top">
                            <div class="form-group">
                                <div class="input-group">
                                    <input name="comm_rent" class="form-control" type="number" min="0" step="5" value="150">
                                    <div class="input-group-addon">%</div>
                                </div>
                            </div>
                        </td>
                        <td valign="top">

                        </td>
                    </tr>
                </table>
            </div>

Answer 1

您可以尝试将表单包装在div中并使用它来显示隐藏，

Answer 2

我可以在某种程度上减少代码。试试这个......

$(function () {
    $("[id^='comm_rent_option'").hide();
    $('[name="comm_rent"]').prop('disabled', false);

    if ($(".comm_rent_option").val() === "rent") {
        $("#comm_rent_option1_table").show();
        $('input[name="comm_rent"]').prop('disabled', true);
    } else if ($(".comm_rent_option").val() === "percent") {
        $("#comm_rent_option2_table").show();
        $('select[name="comm_rent"]').prop('disabled', true);
    }

    $(".comm_rent_option").click(function () {
        $("[id^='comm_rent_option'").slideToggle("fast");
        $('[name="comm_rent"]').toggleDisabled();
    });
});

如果您提供HTML，则会更容易给出答案。

使用disable attr简化Jquery show-hide

2 个答案: