.toggle（）问题与jQuery

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

但是，当我取消选中它并按“下一步”时，仍然需要进行验证。

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 <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();
        }
    });

见演示

Answer 4

您可以直接使用ID选择器（“ #ID”）

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