Question

我有一个问题，根据选择的单选按钮显示文本框。问题是隐藏文本框的验证仍在响应，尽管它是隐藏的。例如。选择same选项会再次隐藏文本框，或者根本不显示文本框，因为尚未点击higher和lower。有任何想法吗？我尝试使用切换操作。

以下是验证插件代码：

$("#manufacturingForm").validate({
        rules: {
            percentRevenue: {
                required: true,
                range: [0, 100]
            },
            revenueHigher: {
                required: true,
                range: [0, 100]
            },
            revenueLower: {
                required: true,
                range: [0, 100]
            }
        }
    });

这是我的jquery代码：

// Revenue
    $("input[name='comp-revenues']").on('change', function() {
        var revenue = $(this).val();
        var opposite = '';

        if(revenue == 'Higher') { 
            opposite = 'Lower'; 
            $("#revenuePercent" + opposite).hide();
            $("#revenuePercent" + revenue).show();
        }
        else if (revenue == 'Lower') { 
            opposite = 'Higher';
            $("#revenuePercent" + opposite).hide();
            $("#revenuePercent" + revenue).show();
        }
        else {
            if ($("#revenuePercentHigher").css('display') == 'inline') {
               $("#revenuePercentHigher").hide();
            } 
            else if ($("#revenuePercentLower").css('display') == 'inline') {
               $("#revenuePercentLower").hide();
            }
            else {
                // Do Nothing
            }
        }
    });

我的HTML代码：

<p class='question'>As compared to the same month last year, was it higher, same or lower?</p>
            <input type='radio' name='comp-revenues' value='Higher' required>Higher<br />
            <input type='radio' name='comp-revenues' value='Same'>Same<br />
            <input type='radio' name='comp-revenues' value='Lower'>Lower<br />

            <span id='revenuePercentHigher' class='percent'>
                <p class='question'>About how many percent higher?</p>
                <input name='revenueHigher' type='text' /><br />
            </span>

            <span id='revenuePercentLower' class='percent'>
                <p class='question'>About how many percent lower?</p>
                <input name='revenueLower' type='text' /><br />
            </span>

Answer 1

快速思考：尝试禁用输入字段，而不仅仅是隐藏输入字段。像这样：

$("#revenuePercent" + opposite).hide().prop('disabled', true);
$("#revenuePercent" + revenue).show().prop('disabled', false);

Answer 2

您基本上隐藏了作为输入标记包装的span。它不会阻止验证检查。相反，您尝试在更改事件上禁用这些输入框。

用

替换您的代码

        if(revenue == 'Higher') { 
            opposite = 'Lower'; 
            $("#revenuePercent" + opposite).hide();
            $("#revenuePercent" + opposite +" input").attr('disabled','disabled');
            $("#revenuePercent" + revenue).show();
            $("#revenuePercent" + revenue +" input").removeAttr('disabled');
        }
        else if (revenue == 'Lower') { 
            opposite = 'Higher';
            $("#revenuePercent" + opposite).hide();
            $("#revenuePercent" + opposite +" input").attr('disabled','disabled');;
            $("#revenuePercent" + revenue).show();
            $("#revenuePercent" + revenue + " input").removeAttr('disabled');
        }

希望这适用于您的验证检查。

您还可以在文档加载或文档就绪操作上禁用和隐藏（任何或两个文本框，具体取决于之前选择的单选按钮），这将为您提供良好的用户界面............. 。如有必要，请在文档准备就绪时尝试这些

$('#revenuePercentHigher input , #revenuePercentLower input ').attr('disabled','disabled');
 $('#revenuePercentHigher  , #revenuePercentLower  ').hide();

Answer 3

我决定使用Jquery on()函数和事件委托来动态添加/删除文本框。

文本框即使在隐藏时仍然可以验证 - bassistance插件

3 个答案: