使用 JavaScript 根据组合框的值隐藏和禁用元素

发布于 2024-12-18 15:16:46 字数 2225 浏览 0 评论 0原文

我有一个页面，根据组合框的值是否为 false（否），应隐藏输入框并禁用字段集。当组合框的值更改为 true（是）时，表单应显示输入框并启用字段集。

这是我到目前为止所拥有的：

<html>
<head>
<title>combo</title>
<script language="javascript">
    function ToggleDisplay(Section, boolHide) {
        if (boolHide == true) {
            Section.style.display = "none";
        }
        else {
            Section.style.display = "";
        }
    }

    function disableElement(element, boolHide)
    {
        var input =
          document.getElementById(element).getElementsByTagName("input");
            for(var i = 0; i < input.length; i++)
            {
                input[i].setAttribute("disabled",boolHide);
            }
        }

        function hideShowElement(CurrentSection, OtherSection, DisableSection)
        {
            var sectionVal = CurrentSection.value;
                if (sectionVal == 0) {
                    ToggleDisplay(OtherSection, true);
                    //disableGroup (this.form, 'Radio1' , true);
                    disableElement(DisableSection, "true");
                }
                else {
                    ToggleDisplay(OtherSection, false);
                    //disableGroup (this.form, 'Radio1' , true);
                    disableElement(DisableSection, "false");
                }
            }
</script>
</head>
<body>
<form name="testForm" action="" method="post">
    Show Hidden Text?   <select name="cmbYN"
      onchange="hideShowElement(this, MyDIV, 'OptionGrp1');">
        <option value="0" selected="selected"></option>
        <option value="1">Yes</option>
        <option value="0">No</option>
    </select>

    <div id="MyDIV" style="display: none">
        My Hidden Text: <input name="Text1" type="text" />
    <br>
    </div>
    <fieldset id="OptionGrp1" name="Group1">
        Option Group<br><br>
        Option 1<input name="Radio1" type="radio" checked>
        Option 2<input name="Radio1" type="radio">
    </fieldset>
</form>
</body>
</html>

这是隐藏输入框并禁用字段集，但不重新启用它们。

原文

I have a page where, depending on whether the value of a combobox is false (no), an input box should be hidden and a fieldset disabled. When the combobox's value changes to true (yes), the form should show the input box and enable the fieldset.

This is what I have so far:

<html>
<head>
<title>combo</title>
<script language="javascript">
    function ToggleDisplay(Section, boolHide) {
        if (boolHide == true) {
            Section.style.display = "none";
        }
        else {
            Section.style.display = "";
        }
    }

    function disableElement(element, boolHide)
    {
        var input =
          document.getElementById(element).getElementsByTagName("input");
            for(var i = 0; i < input.length; i++)
            {
                input[i].setAttribute("disabled",boolHide);
            }
        }

        function hideShowElement(CurrentSection, OtherSection, DisableSection)
        {
            var sectionVal = CurrentSection.value;
                if (sectionVal == 0) {
                    ToggleDisplay(OtherSection, true);
                    //disableGroup (this.form, 'Radio1' , true);
                    disableElement(DisableSection, "true");
                }
                else {
                    ToggleDisplay(OtherSection, false);
                    //disableGroup (this.form, 'Radio1' , true);
                    disableElement(DisableSection, "false");
                }
            }
</script>
</head>
<body>
<form name="testForm" action="" method="post">
    Show Hidden Text?   <select name="cmbYN"
      onchange="hideShowElement(this, MyDIV, 'OptionGrp1');">
        <option value="0" selected="selected"></option>
        <option value="1">Yes</option>
        <option value="0">No</option>
    </select>

    <div id="MyDIV" style="display: none">
        My Hidden Text: <input name="Text1" type="text" />
    <br>
    </div>
    <fieldset id="OptionGrp1" name="Group1">
        Option Group<br><br>
        Option 1<input name="Radio1" type="radio" checked>
        Option 2<input name="Radio1" type="radio">
    </fieldset>
</form>
</body>
</html>

This is hiding the input box and disabling the fieldset, but not re-enabling them.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

老娘不死你永远是小三 2024-12-25 15:16:46

您应该将显示更改回之前的状态，通常是块。

        if (boolHide){
            Section.style.display = "none";
        }else {
            Section.style.display = "block";
        }

同样对于禁用者，正确的方法是将禁用属性设置为禁用，然后将其删除：

            for(var i = 0; i < input.length; i++)
            { 
                if(boolHide){
                    input[i].setAttribute("disabled", "disabled");
                }else{
                    input[i].removeAttribute("disabled");
                }
            }

You should change the display back to what it was before, normally block.

        if (boolHide){
            Section.style.display = "none";
        }else {
            Section.style.display = "block";
        }

Also for the disabled, the proper way is setting the disabled attribute to disabled and removing it afterwards:

            for(var i = 0; i < input.length; i++)
            { 
                if(boolHide){
                    input[i].setAttribute("disabled", "disabled");
                }else{
                    input[i].removeAttribute("disabled");
                }
            }

回复收藏 0 原文

~没有更多了~