javascript 禁用/启用复选框和下拉菜单

发布于 2024-11-19 19:22:29 字数 1435 浏览 0 评论 0原文

您好,我正在尝试在选中复选框时禁用下拉菜单,而在取消选中复选框时启用下拉菜单。下面是我的 javascript,当我选中复选框时它正在工作,但它不会让我取消选中复选框:

     <script type="text/javascript">

             function  test(obj){

                     if (document.getElementsByName("aForm[0].info")[0].checked = true) {  
                             alert("here");
                             document.getElementsByName("aForm[0].gender")[0].disabled = true; 
                    }
                     else document.getElementsByName("aForm[0].info")[0].checked = false;{
                     document.getElementsByName("aForm[0].gender")[0].enabled = true;


             }
             }

             </script>

这是我的 jsp

   <logic:iterate id="data" name="aForm" property="testList">
            <tr>

                <td>
                <html:checkbox indexed="true" name="aForm" styleId="something" property="info" onclick="test(this)"/>

                </td>
                  <td>
                   <html:select name="aForm" indexed="true" property="unit" styleId="dropdown">
                                    <html:optionsCollection name="aForm" property="selectGender" value="value" label="label"/>
                            </html:select>
                            >
                  </td>
            </tr>
        </logic:iterate>

Hi I am trying to disable a drop down when a checkbox is checked and the when the checkbox is unchecked enable the drop down. below is my javascript and it is working when I check the checkbox but it won't let me uncheck the checkbox:

     <script type="text/javascript">

             function  test(obj){

                     if (document.getElementsByName("aForm[0].info")[0].checked = true) {  
                             alert("here");
                             document.getElementsByName("aForm[0].gender")[0].disabled = true; 
                    }
                     else document.getElementsByName("aForm[0].info")[0].checked = false;{
                     document.getElementsByName("aForm[0].gender")[0].enabled = true;


             }
             }

             </script>

and here is my jsp

   <logic:iterate id="data" name="aForm" property="testList">
            <tr>

                <td>
                <html:checkbox indexed="true" name="aForm" styleId="something" property="info" onclick="test(this)"/>

                </td>
                  <td>
                   <html:select name="aForm" indexed="true" property="unit" styleId="dropdown">
                                    <html:optionsCollection name="aForm" property="selectGender" value="value" label="label"/>
                            </html:select>
                            >
                  </td>
            </tr>
        </logic:iterate>

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

久光 2024-11-26 19:22:29

您正在存储一个值,而不是比较

if 语句

if( document.getElementsByName("aForm[0].info")[0].checked = true )

应该

if( document.getElementsByName("aForm[0].info")[0].checked == true )

注意 ==

而 else 是什么?

else document.getElementsByName("aForm[0].info")[0].checked = false;{

您将其视为 else if(),else 那里没有语句。

您的代码在运行时应该抛出 JavaScript 错误。

并且没有启用这样的东西,它只是禁用,true/false。

您的代码应该如下所示

function test(obj) {
    if (document.getElementsByName("aForm[0].info")[0].checked = true) {
        document.getElementsByName("aForm[0].gender")[0].disabled = true;
    }
    else {
        document.getElementsByName("aForm[0].gender")[0].disabled= false;
    }
}

,并且可以简化为仅 3 行:

function test(obj) {
        document.getElementsByName("aForm[0].gender")[0].disabled = document.getElementsByName("aForm[0].info")[0].checked;    
}

并使其在没有元素名称的情况下工作:

<script>
    function test(cb){
        cb.parentNode.parentNode.getElementsByTagName("select")[0].disabled = cb.checked;
    }
</script>

<table>
  <tbody>
    <tr>
        <td><input type="checkbox" onclick="test(this);"></td>
        <td><select><option>a</option><option>b</option></select></td>
    </tr>
    <tr>
        <td><input type="checkbox" onclick="test(this);"></td>
        <td><select><option>a</option><option>b</option></select></td>
    </tr>   
  </tbody>
</table>

注意:如果页面结构发生变化,parentNode.parentNode 必然会中断。 :)

You are storing a value, not comparing

The if statement

if( document.getElementsByName("aForm[0].info")[0].checked = true )

should be

if( document.getElementsByName("aForm[0].info")[0].checked == true )

notice the ==

And what is with the else?

else document.getElementsByName("aForm[0].info")[0].checked = false;{

You are treating it like an else if(), else does not have a statement there.

Your code should throw JavaScript errors when run.

And there is no such thing as enabled, it is just disabled, true/false.

Your code should look like

function test(obj) {
    if (document.getElementsByName("aForm[0].info")[0].checked = true) {
        document.getElementsByName("aForm[0].gender")[0].disabled = true;
    }
    else {
        document.getElementsByName("aForm[0].gender")[0].disabled= false;
    }
}

and it can be simplified down to just 3 lines:

function test(obj) {
        document.getElementsByName("aForm[0].gender")[0].disabled = document.getElementsByName("aForm[0].info")[0].checked;    
}

and to make it work without the element names:

<script>
    function test(cb){
        cb.parentNode.parentNode.getElementsByTagName("select")[0].disabled = cb.checked;
    }
</script>

<table>
  <tbody>
    <tr>
        <td><input type="checkbox" onclick="test(this);"></td>
        <td><select><option>a</option><option>b</option></select></td>
    </tr>
    <tr>
        <td><input type="checkbox" onclick="test(this);"></td>
        <td><select><option>a</option><option>b</option></select></td>
    </tr>   
  </tbody>
</table>

Note: parentNode.parentNode is bound to break if the page structure changes. :)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文