通过 Radio 和 Checkbox 有条件地禁用按钮答案

【问题标题】：Condtionally disable button by Radio and Checkbox通过 Radio 和 Checkbox 有条件地禁用按钮
【发布时间】：2015-09-25 18:21:12
【问题描述】：

我想有条件地禁用基于单选框和复选框组合的按钮。收音机将有两个选项，第一个默认选中。如果用户选择第二个选项，那么我想禁用一个按钮，直到至少选中一个复选框。

我在 CodePen 和 Stack Overflow 上进行了详细搜索，但找不到适用于我的条件的解决方案。我确实找到的结果很接近，但由于我是 Javascript 新手，因此无法适应我的需求。

如果有帮助，我正在使用 JQuery。

如果需要： http://codepen.io/traceofwind/pen/EVNxZj

<form>
<div id="input-option1">First option: (required)
   <input type="radio" name="required" id="required" value="1" checked="checked">Yes
   <input type="radio" name="required" id="required" value="2">No
<div>

<div id="input-option2">Optionals:
   <input type="checkbox" name="optionals" id="optionals" value="2a">Optional 1
   <input type="checkbox" name="optionals" id="optionals" value="2b">Optional 2
<div>

<div id="input-option3">Extras:
   <input type="checkbox" name="extra" id="extra" value="3">Extra 1
<div>
   
<button type="button" id="btn">Add to Cart</button>
</form>

（请原谅代码，例如它是简写！）

表单元素 ID 在某种程度上是固定的。 ID 是由 OpenCart 生成的，所以我相信命名约定是按组设置的，而不是唯一的。例如，我不能使用诸如 radio_ID_1 和 radio_ID_2 之类的 ID；这是一个 OpenCart 框架方面，而不是个人选择。

最后，在伪代码中，我希望有人可以建议一个 JQuery / javascript 解决方案，如下所示：

if radio = '2' then
   if checkboxes = unchecked then
      btn = disabled
      else
         btn = enabled
   end if
end if

【问题讨论】：

您的问题能否更准确一点？您遇到了什么具体问题，或者这是“我什至不知道从哪里开始”的情况？
您好丹尼尔，感谢您的提问。这是一个“我什至不知道从哪里开始”的情况。我希望可以完整给出 javascript/JQuery 解决方案，或者有人可以指出我正确的方向。干杯
请注意，由于重复的 ID 值，此 HTML 无效，无论它来自何处。如果一个框架正在生成这个标记，我会怀疑使用它。

标签： javascript jquery button checkbox radio-button

【解决方案1】：

这是一个快速的解决方案，我希望这就是您所追求的。

$(function() {
    var $form = $("#form1");
    var $btn = $form.find("#btn");
    var $radios = $form.find(":radio");
    var $checks = $form.find(":checkbox[name='optionals']");

    $radios.add($checks).on("change", function() {

        var radioVal = $radios.filter(":checked").val();
        $btn.prop("disabled", true);
        if (radioVal == 2) {
            $btn.prop("disabled", !$checks.filter(":checked").length >= 1);
        } else {
            $btn.prop("disabled", !radioVal);
        }
    });
});

这里是a demo，上面加上你的 HTML。

注意：删除除表单 ID、按钮 ID 之外的所有 ID（因为它们在演示中使用），因为 HTML 文档中不能有重复的 ID。 ID 用于标识唯一的内容。如果想法是为这些元素设置样式，则使用类。

【讨论】：

【解决方案2】：

如果你预见到你未来会有大量的 JavaScript 开发，那么我强烈推荐 Udacity 提供的 JavaScript 课程。虽然完整的课程内容只收费提供，但课程材料中最重要的部分——视频和综合问题——是免费的。

但是，如果您不打算在未来进行大量 JavaScript 开发，而只需要一个快速的解决方案以便继续前进，那么您可以通过以下方式完成您想要完成的工作：

$(document).ready(function(){
  $('form').on('click', 'input[type="radio"]', function(){
    conditionallyToggleButton();
  });
  
  $('form').on('click', 'input[type="checkbox"]', function(){
    conditionallyToggleButton();
  });
});

function conditionallyToggleButton()
{
  if (shouldDisableButton())
  {
      disableButton();
  }
  else
  {
    enableButton();
  }
}

function shouldDisableButton()
{
  if ($('div#input-option1 input:checked').val() == 2 
      && !$('form input[type="checkbox"]:checked').length)
  {
    return true;
  }
  
  return false;
}

function disableButton()
{
  $('button').prop('disabled', true);
}

function enableButton()
{
  $('button').prop('disabled', false);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="input-option1">First option: (required)
   <input type="radio" name="required" id="required" value="1" checked="checked">Yes
   <input type="radio" name="required" id="required" value="2">No
<div>

<div id="input-option2">Optionals:
   <input type="checkbox" name="optionals" id="optionals" value="2a">Optional 1
   <input type="checkbox" name="optionals" id="optionals" value="2b">Optional 2
<div>

<div id="input-option3">Extras:
   <input type="checkbox" name="extra" id="extra" value="3">Extra 1
<div>
   
<button type="button" id="btn">Add to Cart</button>
</form>

请注意，上面的 JavaScript 代码是一种快速而简单的解决方案。为了做到这一点，您可能需要创建一个表示添加到购物车表单的 JavaScript 类，该类管理表单元素的行为并将 jQuery 包装的表单元素缓存在属性中。

【讨论】：