Question

我有一个表单，其中有一个问题，您可以通过勾选复选框选择包括其他在内的多个答案。然后你勾选其他人，它假设显示一个文本框，当未选中时，它应该再次隐藏文本框。

当我取消它时会发生什么，是的，它会隐藏但是仍然会弹出验证错误。我不确定是什么导致了它。换句话说，尽管它是隐藏的，但它仍在验证。

这是我的javascript：

$("input[name = 'production-up']").change(function () {
    //check if the selected option is others
    if (this.value === "other") {
        //toggle textbox visibility
        $("#productionUpOther").toggle();
    }
});

和我的HTML：

<span id='productionUp' class='level'>
                <p>Production - Reasons why it is up. Click as many as apply.</p>
                <input type='checkbox' name='production-up' value='Increase in demand' required>Increase in demand <br/>
                <input type='checkbox' name='production-up' value='Expected increase in demand'>Expected increase in demand <br/> 
                <input type='checkbox' name='production-up' value='Fullfillment of past orders'>Fulfillment of past orders <br/>
                <input type='checkbox' name='production-up' value='Increased marketing activity'>Increased marketing activity <br/>
                <input id="other" type="checkbox" name="production-up" value='other' />Other
                <input id='productionUpOther' name='other-production-up' type='text' required/>
            </span>

请注意，这只是我的代码的一部分。关于如何对此采取行动的任何想法？！

我可以在这里勾选other This is what it looks like:

但是当我取消它并按下Next时，仍然需要进行验证。

enter image description here

Answer 1

你可以试试这个：

$("input[name = 'production-up']").change(function () {
    //check if the selected option is others
    if (this.value === "other") {
        //toggle textbox visibility
        $("#productionUpOther").toggle();
        if (this.checked) {
           $("#productionUpOther").attr('required','1');
        } else {
           $("#productionUpOther").removeAttr('required');
        }
    }
});

Answer 2

您要做的是禁用“其他”文本字段。所以在这种情况下，我会使用'disabled'属性，然后使用CSS隐藏字段。

一个例子可能是：

<强> JS

$("#productionUpOther").prop('disabled', true);
$("input[name = 'production-up']").change(function () {
    var hasTheFieldToBeEnabled = this.value === "other" && this.checked;
    $("#productionUpOther").prop('disabled', !hasTheFieldToBeEnabled);
});

<强> CSS

:disabled
{
    display: none;
}

在这里，隐藏所有已禁用的字段......但如果不是您想要的话，CSS就是您的朋友^^

/！\ 小心：IE＆lt; 8不支持'：disabled'，所以如果你想支持IE 8，你应该在禁用它时为输入添加一个类

Answer 3

试试这个

$("#productionUpOther").hide();
    $("input[name = 'production-up']").change(function () {
        //check if the selected option is others
        if (this.value === "other"  && this.checked) {
            //toggle textbox visibility
            $("#productionUpOther").show();
        }
        else{
            $("#productionUpOther").hide();
        }
    });

请参阅DEMO

Answer 4

您可以直接使用ID Selector ("#ID")

$("input#other").change(function () {
     $("#productionUpOther").toggle(this.checked);
     $("#productionUpOther").prop('required', this.checked);
});

.toggle（）与jquery有关

4 个答案: