0

我有一个小表格。我想在选择所有单选按钮时启用提交按钮。

下面是我的代码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方面很弱，请告诉我。

如果 li 不修复，另一件事将动态生成，所以我将不得不做。基本上每个 li 都是一个问题，单选按钮是选项。所以问题将动态生成，它可以是任何否。它不修复

4

3 回答 3

1 
$(':radio').on('change', function(e) {
  var len = $(':radio:checked').length;
  if( len === 3 ) {
     $('input[type=submit].find').prop('disabled', false);
  }
});

演示

于 2012-08-07T06:13:31.217 回答
0

您的标记中有 4 组单选按钮，您可以检查所选单选按钮的长度是否等于单选按钮组的长度，如果是，请启用提交按钮，尝试以下操作： 

$(document).on('change', 'input[type=radio]', function(){
   if ($('input[type=radio]:checked').length == 4) {
       $('input[type=submit]').prop('disabled', false)
   } 
})

演示

请注意，story组中的第三个元素具有不同的名称属性。

<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>
                                                 --------------------------^
于 2012-08-07T06:08:27.977 回答
0

或者再次：

$('input[type=radio]').on('change', function(){
    if(
         $('input[name=want]').is(':checked') &&
         $('input[name=story]').is(':checked') &&
         $('input[name=carry]').is(':checked')
     ){
         $('input[type=submit]').prop('disabled', false)
     }
});
于 2012-08-07T06:18:00.900 回答