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

【问题标题】：Disable button if one radio is checked如果选中一个收音机，则禁用按钮
【发布时间】：2019-04-22 00:13:49
【问题描述】：

我有三个收音机，每个收音机的名称都以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);
    }
  });
});

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

【问题讨论】：

请分享您的完整代码（至少是按钮和收音机的 HTML）。
请添加minimal reproducible example 以显示实际问题。

标签： javascript

【解决方案1】：

您可以尝试使用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 />

【讨论】：

呃...你有一个小错误。 :) name 应该是一样的。
@PraveenKumarPurushothaman，请查看我的更新，因为您使用过 name*='delivery_option'，以为您理解名称会有所不同
老大，那是因为……好吧，现在你明白了……Semma！ :)

【解决方案2】：

您只运行代码一次。 每次单击或更改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 />

【讨论】：