Question

以下是我的代码，经过互联网搜索之后;我无法做这个简单的验证。

    <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）如果我保持无线电＆amp;在div中提交按钮并尝试使用div的id并启用内部单选按钮 2）在jquery中，我可以运行一个迭代器，它会减少我的代码行

提前致谢!!!

Answer 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>

Answer 2

你可以做到

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

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

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

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

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

Answer 3

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

试试这个 - DEMO

验证（启用）单选按钮＆amp;使用Jquery Optimization从复选框中提交按钮

3 个答案: