2012-08-07 94 views
1

我有一个小窗体。当所有的单选按钮被选中时,我想启用提交按钮。下面需要启用提交按钮选择单选按钮

是我的代码的html

<form action="#" id="form1" method="post"> 
       <ul> 
        <li> 
         <h3>Here’s what I want:<strong class="result1"></strong></h3> 
         <div> 
         <span><input type="radio" value="Cash Back rewards" name="want" id="01" /><label for="01">Cash Back rewards</label></span> 
         <span><input type="radio" value="Travel rewards" name="want" id="02" /><label for="02">Travel rewards</label></span> 
         <span><input type="radio" value="Gas rewards" name="want" id="03" /><label for="03">Gas rewards</label></span> 
         <span><input type="radio" value="Shopping rewards" name="want" id="04" /><label for="04">Shopping rewards</label></span> 
        </div> 
        </li> 

        <li> 
         <h3>Here’s my credit story: <strong class="result2"></strong></h3> 
         <div> 
         <span><input type="radio" value="I’m new to credit" name="story" id="05" /><label for="05">I’m new to credit</label></span> 
          <span><input type="radio" value="I pay my bills on time" name="story" id="06" /><label for="06">I pay my bills on time</label></span> 
         <span><input type="radio" value="I’ve had credit issues in the past" name="07" id="issues" /><label id="07">I’ve had credit issues in the past</label></span> 
         </div> 
        </li> 

        <li> 
         <h3>Here’s what I carry:</h3> 
         <span><input type="radio" value="I have a credit card with a good record" name="carry" id="08" /><label for="08">I have a credit card with a good record</label></span> 
         <span><input type="radio" value="I don’t have a credit card with a good record" name="carry" id="09" /><label for="09">I don’t have a credit card with a good record</label></span> 

        </li> 
       </ul> 
       <input type="submit" value="" name="" class="find" /> 
       </form> 

我在JavaScript的弱,请告诉我。

还有一件事情,如果李不修复它会动态生成,所以我将不得不做。基本上每一个李是一个队列,单选按钮是选项。所以这个问题会被动态生成,它可以是任何没有。它不是解决

+1

这个问题和以前的问题有什么明显的区别吗? – undefined 2012-08-07 07:46:08

+0

[需要启用提交按钮]的可能重复(http://stackoverflow.com/questions/11840122/need-to-enable-submit-button) – 2012-08-07 14:35:29

回答

3

像这样的事情会做的伎俩:

$('#form1 :radio').click(function() { 
    var disabled = $('#form1 li').filter(function() { return $(':radio:checked', this).length == 0; }).length > 0; 
    $('#form1 .find').prop('disabled', disabled); 
}); 

这里假设你的提交按钮是关闭的页面加载,因为当一个选项被选中禁用状态只改变。您当然可以在DOMReady中进行相同的检查(在这种情况下,我会提取侦听器函数),但我更愿意在加载过程中手动设置标记。

Demo

disabled变量是通过选择表格中的所有li元素,它减少到只有满足过滤标准的那些“不含检查单选按钮”,并检查是否存在任何元件设置在减少收集。

如果您使用的jQuery版本低于1.6,请使用.attr而不是.prop来设置禁用状态。