Javascript 单选按钮的验证（启用）&；使用Jquery优化从复选框提交按钮_Javascript_Jquery_Html

Javascript 单选按钮的验证（启用）&；使用Jquery优化从复选框提交按钮

javascript jquery html

Javascript 单选按钮的验证（启用）&；使用Jquery优化从复选框提交按钮,javascript,jquery,html,Javascript,Jquery,Html,下面是我的代码，在网上搜索了这么多；我不能做这个简单的验证 <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(){

下面是我的代码，在网上搜索了这么多；我不能做这个简单的验证

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


$（文档）.ready（函数（）{
$（'#myText'）。单击（函数（）{
$（'#radio1'）.removeAttr（'disabled'，'disabled'）；
$（'#radio2'）.removeAttr（'disabled'，'disabled'）；
$（'#radio3'）.removeAttr（'disabled'，'disabled'）；
$（“#提交”）.removeAttr（'disabled'，'disabled'）；
})
});
点击它！




第一台


第二台


第三台


提交

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

提前感谢

Javascript:

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

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

html:

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

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


点击它


收音机1

收音机2

收音机3

提交

你可以这样做

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

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

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

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

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

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

对于每个元素，使用

class

属性，而不是使用

id

试试这个-

fyi您使用的removeAttr错误-

$（'radio1'）。removeAttr（'disabled'）id有助于准确选择具有此id的唯一元素，类选择具有相同类的所有元素大多数情况下您不想使用该类，因为该类将用于不相关的单选按钮。大多数情况下，您最好使用单选组名称，这样您的逻辑只适用于属于同一组的所有单选按钮。在本例中，它类似于$（'input[name=gok]'）。removeAttr（'disabled'）