单选按钮的验证(启用）&使用Jquery Optimization从复选框中选择submit按钮

Validation(Enable) of radio buttons & submit button from a checkbox using Jquery Optimization

本文关键字：Optimization Jquery 复选框 按钮 submit 选择 使用 验证 启用 amp 单选按钮      更新时间：2023-09-26

下面是我在互联网上搜索了这么多之后的代码；我不能做这种简单的验证。

    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
   $(document).ready(function(){
        $('#myText').click(function(){
           $('#radio1').removeAttr('disabled','disabled');
           $('#radio2').removeAttr('disabled','disabled');
           $('#radio3').removeAttr('disabled','disabled');
           $('#submit').removeAttr('disabled','disabled');
         })
});
    </script>
    </head>
    <body>
    <input type="checkbox" id="myText" value="Click it!">Click it!</input>
    <br/>
    <br/>
    <input type="radio" id="radio1" name="gok" value="Radio 1" disabled="disabled"> Radio 1</input>
    <br/>
    <input type="radio" id="radio2" name="gok" value="Radio 2" disabled="disabled"> Radio 2</input>
    <br/>
    <input type="radio" id="radio3" name="gok" value="Radio 3" disabled="disabled"> Radio 3</input>
    <br/>
    <button type="button" id="submit" disabled="disabled"> Submit</button>
    </body>
    </html>

选中时上面的复选框；单选按钮被启用，提交按钮也被启用。我不认为这是一个优化的解决方案；请帮助我获得一个优化版本的代码，如1） 如果我保留收音机&提交div中的按钮并尝试使用div的id，内部单选按钮已启用2） 在jquery中，我可以运行迭代器之类的东西，这将减少我的行代码

提前感谢！！！

Javascript:

$(document).ready(function(){
  $('#myText').click(function(){
    $('#enableMe').children().removeAttr('disabled'); // or $('#enableMe').children().prop('disabled',true/false')
  });
});

html:

<div id = 'enableMe'>
  <input type="checkbox" id="myText" value="Click it!">Click it!</input> <br/> <br/>
  <input type="radio" id="radio1" name="gok" value="Radio 1" disabled="disabled"> Radio 1</input> <br/>
  <input type="radio" id="radio2" name="gok" value="Radio 2" disabled="disabled"> Radio 2</input> <br/>
  <input type="radio" id="radio3" name="gok" value="Radio 3" disabled="disabled"> Radio 3</input> <br/>
  <button type="button" id="submit" disabled="disabled"> Submit</button>
</div>

您只需执行

$('#myText').click(function(){
       // if this is all you are going to have in your html just
       // $(this).siblings().prop('disabled',false) would work
       $(this).siblings('input[type=radio],#submit').prop('disabled',false);
 })

http://jsfiddle.net/cj3zY/

fyi你使用removeAttr错误-

$('#radio1').removeAttr('disabled'); //<-- should be how you use it..

但如果你在jQuery 1.6+上，你真的应该使用.prot

$(element).prop('disabled',true/false);

.pr（）文档

属性通常会影响DOM元素的动态状态，而不会更改序列化的HTML属性。示例包括输入元素的value属性、输入和按钮的禁用属性或复选框的checked属性。应使用.pr（）方法来设置disabled和checked，而不是.attr（）。

如果要根据复选框切换禁用的属性。。你可以这样做

$('#myText').click(function(){
       $(this).siblings('input[type=radio],#submit').prop('disabled',!this.checked);
})​

http://jsfiddle.net/cj3zY/1/

不要为每个元素使用id，而是使用class属性。

试试这个-DEMO

相关文章：