Question

我有3个无线电，每个无线电的名称以delivery_option开头，并带有css类continue的提交按钮。我想测试是否选中了单选按钮，否则必须禁用该按钮。

我在下面编写了代码

$(document).ready(function() {
  $('#checkout-delivery-step input:radio').each(function() {
    if ($("input:radio[name*='delivery_option']:checked").length != 0) {
      $('.continue').prop('disabled', false);
    } else {
      $('.continue').prop('disabled', true);
    }
  });
});

但是它不起作用，这是什么问题？

Answer 1

您只运行一次代码。每次单击或更改radio按钮时，必须每次运行该代码。因此，您需要使用以下内容：

// Make this a function.
function checkProgress() {
  if ($("input:radio[name*='delivery_option']:checked").length != 0) {
    $('.continue').prop('disabled', false);
  } else {
    $('.continue').prop('disabled', true);
  }
}

$(function () {
  // Set the status once the doc loads.
  checkProgress();
  // Set it again when any of the radio buttons are clicked.
  $("input:radio[name*='delivery_option']").on("click change", checkProgress);
});

代码段

// Make this a function.
function checkProgress() {
  if ($("input:radio[name*='delivery_option']:checked").length != 0) {
    $('.continue').prop('disabled', false);
  } else {
    $('.continue').prop('disabled', true);
  }
}

$(function () {
  // Set the status once the doc loads.
  checkProgress();
  // Set it again when any of the radio buttons are clicked.
  $("input:radio[name*='delivery_option']").on("click change", checkProgress);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>Group 1</h3>

Option 1: <input type="radio" name="delivery_option_1" />
Option 2: <input type="radio" name="delivery_option_1" />
Option 3: <input type="radio" name="delivery_option_1" />

<h3>Group 2</h3>

Option 1: <input type="radio" name="delivery_option_2" />
Option 2: <input type="radio" name="delivery_option_2" />
Option 3: <input type="radio" name="delivery_option_2" />

<p>Submit?</p>

<input type="button" value="Submit" class="continue" disabled />

Answer 2

您可以使用removeAttr尝试类似的操作，这将从已设置的任何元素中删除该属性。

对于收音机，您也可以这样做，一旦单击它，便可以启用该按钮，因为它没有提供取消选择它的方法。

最后，如果元素是一个组，则元素的名称可以相同，并且只有id必须是唯一的。选中here。

因此，正确的代码将

<label for="delivery_option1">Option1:</label><input type="radio" id="delivery_option1" name="delivery_option" />
<label for="delivery_option2">Option2:</label> <input type="radio" id="delivery_option2" name="delivery_option" />
<label for="delivery_option3">Option3:</label><input type="radio" id="delivery_option3" name="delivery_option" />

$(function(){

      $("input:radio[name*='delivery_option']").click(function(){
      
        $(".continue").removeAttr("disabled");
      
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Option1: <input type="radio" name="delivery_option1" />
Option2: <input type="radio" name="delivery_option2" />
Option3: <input type="radio" name="delivery_option3" />

<input type="button" value="Submit" class="continue" disabled />

如果选中了一个收音机，则禁用按钮

2 个答案: