堆栈内存溢出
  繁体   English   中英

根据单选和复选框显示和隐藏，启用和禁用

[英]Show and hide, enable and disable depending on radios and checkboxes

 原文  2015-03-19 13:13:22  4   4    jquery

问题描述

好的，我将我的问题改写为两个较小的模块：

1）当我们单击形式为名称为electronics的单选按钮时，应显示id为'electronics的div最初是隐藏的。 我的jQuery函数对此不正确。 有指针吗？

2）首先应禁用在div电子产品中输入数量的文本框，然后在用户单击项目名称旁边的复选框时激活该文本框。

我的代码如下： 

 <html>
        <head>
            <script src="jquery-1.11.0.js"></script>
            <style>
                div{display:none}
            </style>
        </head>
        <body>
            <form>
             <input type="radio" name="household" id   ="electronics" value="electronics">Electronics<br>
             <input type="radio" name="household" id="cookware" value="cookware">Cookware<br>
              <input type="radio" name="household" id="both"  value="both">Both<br>
            </form>
            <script>
                $(document).ready(function(){
                    $(input[type="radio"]).click(function(){
                        $("div").show;
                    });
                });
            </script>
            <div id="electronics">
                <input type="checkbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text1"><br>
                <input type="checkbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text2"><br>
</div>
        </body>
    </html>

4 个解决方案

解决方案1
 2  2015-03-19 13:25:44

  1. 给div一个类，并从收音机中删除该ID，因为ID必须是唯一的
  2. 将输入文本框的类型固定为type = text。
  3. 将点击事件添加到复选框
  4. 运行复选框onload的测试以禁用/启用文本字段 

 $(function () { $('input[type="radio"]').on("click",function () { $(".selections").hide(); // hide them all if (this.value=="both") $(".selections").show(); // show both else $("#"+this.value).show(); // show the one with ID=radio value }); $('.selections input[type="checkbox"]').on("click",function() { // $(this).next().prop("disabled",!this.checked); // disable if not checked $(this).next().toggle(this.checked); // hide if not checked }); $('.selections input[type="text"]').each(function() { // initialise // $(this).prop("disabled",!$(this).prev().is(":checked")); $(this).toggle($(this).prev().is(":checked")); }); }); 
 .selections { display:none } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <input type="radio" name="household" value="electronics">Electronics <br> <input type="radio" name="household" value="cookware">Cookware <br> <input type="radio" name="household" value="both">Both <br> </form> <div id="electronics" class="selections"> <input type="checkbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp; <input type="text" name="text1"> <br> <input type="checkbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp; <input type="text" name="text2"> <br> </div>

解决方案2
 0  2015-03-19 13:16:36

选择器错误 

            $(document).ready(function(){
                $('input[type="radio"]').click(function(){
                    $("div").show();
                });
            });

要么 

            $(document).ready(function(){
                $(":radio").click(function(){
                    $("div").show();
                });
            });

解决方案3
 0  2015-03-19 13:23:59

看来您选择器是错误的，并且show函数应该是.show() 。 将此js代码放在脚本部分。

问题1和2的答案 

$(document).ready(function(){

    /* question 1 */
   $('input[type="radio"]').click(function(){
            $("div").show();
   });

    /* question 2 */
   $('input[type="checkbox"]').on('click',function(){            

     if($(this).is(':checked'))
     {
        $(this).next().removeAttr('disabled');
     }
     else
     {
        $(this).next().attr('disabled','disabled');
     }

   })
});

这是标记。 我稍作更改（在初始开始时隐藏div和禁用的输入文本 。 

<body>
    <form>
      <input type="radio" name="household" id   ="electronics" value="electronics">Electronics<br>
      <input type="radio" name="household" id="cookware" value="cookware">Cookware<br>
      <input type="radio" name="household" id="both"  value="both">Both<br>
    </form>

    <div id="electronics" style="display:none">
        <input type="checkbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text1" disabled><br>
        <input type="checkbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp;
        <input type="textbox" name="text2" disabled><br>
</div>
</body>

解决方案4
 0  2015-03-19 13:26:53

如果您要在页面中添加更多单选按钮，则应在单选按钮上使用类。 

<input type="radio" name="household" class="myradio" value="electronics">Electronics<br>
<input type="radio" name="household" class="myradio"  value="cookware">Cookware<br>
<input type="radio" name="household" class="myradio"   value="both">Both<br>

还在复选框上... 

<div id="electronics" style="display:none">
    <input type="checkbox" class="mycheckbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp;
    <input type="text" id="text_radio" name="text_radio"><br>
    <input type="checkbox" class="mycheckbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp;
    <input type="text" id="text_phone" name="text_phone"><br>
</div>

然后，在页面加载后立即禁用复选框并创建click函数： 

$(document).ready(function(){
    // disable all text inputs
    $(".textbox").prop("disabled", true);

    $(".myradio").click(function(){
        //get value from this radio and show respective div
        $("#"+$(this).val()).show();
        //enable text input from #text_(value)
        $("#text_"+$(this).val()).prop("disabled", false);
    });

});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 根据复选框启用/禁用按钮 在jqgrid中禁用或启用显示/隐藏列 显示和隐藏文本并启用禁用按钮 显示/隐藏div（如果选中了所有无线电） 如何使用多个无线电隐藏/显示 jquery 中的内容 在选择下拉列表中更改隐藏/显示复选框，具体取决于选项值 根据两个复选框隐藏或显示div（至少有一个复选框） 使用jQuery on Rails应用程序隐藏和显示（或禁用启用）选择字段 如何使用Javascript / jQuery隐藏/显示启用/禁用HTML元素？ 使用jQuery启用/禁用复选框
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM