0

以下是我的代码，在互联网上搜索了这么多之后；我无法做这个简单的验证事情。

    <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 中，我可以运行一个迭代器，这将减少我的代码行

提前致谢！！！

4

3 回答 3

1

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>
于 2012-08-30T16:17:44.770 回答
1

你可以做

$('#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/

仅供参考，您使用 removeAttr 错误-

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

但是，如果您使用的是 jQuery 1.6+，那么您真的应该使用 .prop

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

.prop() 文档

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

如果您想根据复选框切换禁用的属性..您可以这样做

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

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

于 2012-08-30T16:20:12.247 回答
0

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

试试这个 -演示

于 2012-08-30T16:22:53.107 回答