【问题标题】:make a input field required if radio is checked如果选中收音机,则需要输入字段
【发布时间】:2012-08-11 15:25:55
【问题描述】:

只有在选中某个单选时,我才能以某种方式将必需的属性插入到输入字段中吗?

我有一个名为“ladder-meters”的输入字段,默认情况下不需要填写。但是,如果用户选中一个名为“ladder”的单选按钮,则需要填写“ladder-meters”字段。

我的输入如下所示:

<input type="text" name="ladder-meters" id="ladder-meters">

并且应该在电台的 onchange 活动中喜欢这个

<input type="text" name="ladder-meters" id="ladder-meters" required>

【问题讨论】:

    标签: javascript html radio-button onchange required


    【解决方案1】:
    document.getElementById("ladder").addEventListener('change', function(){
        document.getElementById("ladder-meters").required = this.checked ;
    })
    

    每当单击复选框时,必填属性将更改为匹配复选框的选中属性。要反转这种关系,请将this.checked 替换为!this.checked

    这可能需要一些调整以适应您的特定项目。

    这将与此复选框一起使用:

    <input type='checkbox' id='ladder' name='ladder' />
    

    【讨论】:

      【解决方案2】:

      试过 F. Orvalho,对我没用,我不得不使用

      $('#ladder').change(function () {
          if(this.checked) {
              $('#ladder-meters').prop('required', true);
          } else {
              $('#ladder-meters').prop('required', false);
          }
      });
      

      它可能很有用。感谢 F. Orvalho 的结构

      【讨论】:

        【解决方案3】:

        用 jQuery 很容易实现:

        $('#ladder').change(function () {
            if($(this).is(':checked') {
                $('#ladder-meters').attr('required');
            } else {
                $('#ladder-meters').removeAttr('required');
            }
        });
        

        【讨论】:

        • 用过这个!按预期工作:) 谢谢!
        • 七行错综复杂的 jQuery 总能胜过 3 行纯 ol' javascript。自我注意:必须包含更多库。
        • @ColBeseder - 3 行纯 JavaScript,在旧版本的 IE 中无法使用。当您添加功能检测 addEventListener 然后添加 attachEvent 版本时,它将增加行数。话虽如此,问题中没有提到 jQuery,所以应该没有任何 jQuery 答案。
        • 为什么我得到Uncaught TypeError: mycheckbox.is is not a function
        • 第 2 行代码中缺少括号。在 (':checked') 之后添加) 括号
        猜你喜欢
        • 2013-04-26
        • 2019-12-13
        • 2013-12-24
        • 1970-01-01
        • 2013-11-14
        • 1970-01-01
        • 2020-05-18
        • 1970-01-01
        • 2018-01-23
        相关资源
        最近更新 更多