使用禁用属性简化 Jquery 显示隐藏

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 中并使用它来显示 hide ，

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，那么给出答案会更容易。