jQuery的逻辑工作方式3/4（复选框列表） - 如何使它工作100％ [英] Jquery logic working 3/4 of the way (check box list) - How do I make it work 100%

问题描述

我有一个复选框列表，让每个复选框，这是附加到复选框的名称自己独特的ID。我以后的行为，如果一个复选框（在这里：SelfEmployed）被选中，然后隐藏＆LT; D​​IV＆GT; 所示。如果未被选中，在＆LT; D​​IV＆GT; 是隐藏的。默认值是有＆LT; D​​IV＆GT; 隐藏。在＆LT; D​​IV＆GT; 其他投入，在这种情况下，文本。

I have a check box list, each check box having it's own unique ID appended to the name of the checkbox. The behavior I am after is that if ONE checkbox (here: "SelfEmployed") is checked, then a hidden <div> is shown. If it is unchecked, the <div> is hidden. The default is to have the <div> hidden. Inside the <div> are other inputs, in this case a textbox.

在code，我使用的作品3开出4次，我下面会解释。

The code I am using works 3 out of 4 times, which I will explain below.

这是在我的MVC视图顶部jQuery的code：

This is the jquery code at the top of my MVC view:

$(document).ready(function () {
    $("input[name$='MyModel.IncomeTypeCheckBox']").
            click(function () {
        var check_value = $(this).val();
        if (check_value == 'SelfEmployed') {
            $("#IncomeTypeCheckBox_SelfEmployed, 
                #IncomeTypeCheckBox_SelfEmployed input").
                toggle(this.checked);
            $("#IncomeTypeCheckBox_SelfEmployed, 
                #IncomeTypeCheckBox_SelfEmployed input").
                    removeAttr("disabled");
        }
        else if (check_value != 'SelfEmployed') {
            $("#IncomeTypeCheckBox_SelfEmployed, 
                #IncomeTypeCheckBox_SelfEmployed input").
                hide().attr("disabled", "disabled");
        }
 });
    $("#IncomeTypeCheckBox_SelfEmployed, 
        #IncomeTypeCheckBox_SelfEmployed input").
        hide().attr("disabled", "disabled");
});

（注：我硬返回的路线 - 不喜欢的方式，以便不会自动换行code然后导致滚动条）

(Note: I hard-returned the line - don't like the way SO doesn't automatically wordwrap code which then leads to scrollbars)

在 已禁用 部分是很重要的，并添加/作为任何输入的属性中删除。我使用的是验证粘合剂基本上不会允许任何输入一个隐藏＆LT内部; DIV＆GT; 来抛出一个验证错误（显然，当＆LT; D​​IV＆GT; 通过输入显示那么该属性被删除，所有的验证错误将工作）

The "disabled" part is important and is added/removed as an attribute for any inputs. I am using a validation binder which essentially won't allow any of the inputs inside a hidden <div> to throw a validation error (obviously, when the <div> with the inputs is shown then that attribute is removed and any validation errors will work).

在一个页面上我的复选框列表和一个文本框输入。两者都需要（复选框使用自定义的 [强制] 数据注解属性）。还有一个隐藏＆LT; D​​IV＆GT; 与另一个文本框输入。这些都是情景（出4工作，这3）：

On a page I have the checkbox list and one textbox input. Both are required (the checkbox uses a custom [Mandatory] data annotation attribute). There is also the hidden <div> with another textbox input. These are the scenarios (of which 3 out of 4 work):

1. 页面负载。 SelfEmployed未选中。击中提交如果没有在复选框选择和/或第一个文本框为空，将触发验证。隐藏的＆LT; D​​IV＆GT; 不火的验证，因为＆LT;输入＆GT; 中有它的属性设置为禁用=禁用。预期行为 - PASS


2. 页面负载。在文本框中的复选框选择不是SelfEmployed等任何东西，输入的东西可以让页面提交。隐藏的＆LT; D​​IV＆GT; 不火的验证，因为＆LT;输入＆GT; 中有它的属性设置为禁用=禁用。预期行为 - PASS


3. 页面负载。在复选框中选择SelfEmployed显示的是previously隐藏＆LT; D​​IV＆GT; 与第二个文本框。由于该复选框已经什么检查，如果事情是输入到这两个第一个文本框，并在＆LT第二个文本框; DIV＆GT; 这是现在显示（即禁用=禁用属性从第二删除＆LT;输入＆GT; ），则该页面将提交。预期行为 - PASS


4. 页面负载。同＃3，但这个时候，如果你没有在第二个文本框填写＆LT; D​​IV＆GT; ，并尝试提交验证错误会被抛出了第二个文本框（预期）。如果您在第二个文本框填写并提交作品的页面（预期）。但是，如果验证错误仍然出现，取消勾选SelfEmployed复选框（导致＆LT; D​​IV＆GT; 再次被隐藏 - 这是预期），然后尝试提交页面（验证通过的复选框，并第一个文本框），也不会提交。 FAIL。

1. Page loads. "SelfEmployed" is NOT checked. Hitting "Submit" will fire validation if nothing is selected in the checkbox and/or the first textbox is empty. The hidden <div> does not fire validation because the <input> within has it's attribute set to disabled="disabled". EXPECTED BEHAVIOR - PASS.
2. Page loads. Selecting anything other than "SelfEmployed" in the checkbox and inputting something in the textbox will allow page to submit. The hidden <div> does not fire validation because the <input> within has it's attribute set to disabled="disabled". EXPECTED BEHAVIOR - PASS.
3. Page loads. Selecting "SelfEmployed" in the checkbox shows the previously hidden <div> with that second textbox. Since the checkbox has something checked, and if something is typed into both the first textbox and the second textbox in the <div> which is now shown (i.e., the disabled="disabled" attribute is removed from the second <input>), then the page will submit. EXPECTED BEHAVIOR - PASS.
4. Page loads. Same as # 3, except this time, if you do not fill in that second textbox in the <div> and try to submit a validation error is thrown on that second textbox (expected). If you fill in that second textbox and submit the page it works (expected). HOWEVER, if the validation error still appears and you UNCHECK the "SelfEmployed" checkbox (causing the <div> to be hidden again - this is expected), and then try to submit the page (validation passes on checkbox and first textbox), it will not submit. FAIL.

HTML源代码的检查表明，禁用=禁用属性没有被重新插入当SelfEmployed复选框，在上述情况下＃4未被选择（这隐藏＆LT; D​​IV＆GT; ）。 DIV＆GT;这只有在验证错误是在第二个文本框抛出的＆LT发生时显示容器中，然后再次隐藏它，并尝试提交。需要注意的是，如果我只是检查/取消选中SelfEmployed复选框，但不尝试提交（和解雇任何验证），你在Chrome的开发者工具禁用=禁用添加 看并删除，分别为＆LT;输入方式＆gt; 标签

A check of the HTML source shows that the disabled="disabled" attribute is not being reinserted when the "SelfEmployed" checkbox is unselected in scenario # 4 above (which hides the <div>). This occurs only if a validation error is thrown on the second textbox when the <div> container is shown and then you hide it again and try to submit. Note that if I just check/uncheck the "SelfEmployed" checkbox without trying to submit (and firing any validation) you see in Chrome's Dev Tools the disabled="disabled" being added and removed, respectively, to the <input> tag.

我怎样才能解决这个最后的问题？谢谢你。

How can I fix that last problem? Thanks.

推荐答案

这是为我工作：

$(document).ready(function () 
    {
        $("input[name$='StepIncomeInformation.IndividualIncomeTypeCheckBox']").click(function () {
            if ($('#StepIncomeInformation_IndividualIncomeTypeCheckBox_SelfEmployed').is(':checked')) {
                $('#IndividualIncomeTypeCheckBox_SelfEmployed, #IndividualIncomeTypeCheckBox_SelfEmployed input').show().removeAttr("disabled");
            }
            else {
                $('#IndividualIncomeTypeCheckBox_SelfEmployed, #IndividualIncomeTypeCheckBox_SelfEmployed input').hide().attr("disabled", "disabled");
            }
        });
        $("#IndividualIncomeTypeCheckBox_SelfEmployed, #IndividualIncomeTypeCheckBox_SelfEmployed input").hide().attr("disabled", "disabled");
    });

这篇关于jQuery的逻辑工作方式3/4（复选框列表） - 如何使它工作100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！