Question

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

我已经在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

Answer 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用于标识唯一的内容。如果想要设置这些元素的样式，那么使用类。

Answer 2

如果您预计将来会进行大量的JavaScript开发，那么我强烈推荐Udacity提供的JavaScript课程。虽然完整课程内容仅收取费用，但课程材料中最重要的部分 - 视频和综合问题 - 是免费的。

但是，如果您不打算在未来进行大量的JavaScript开发，只需要一个快速的解决方案，那么您可以继续前进，这里是如何完成您要完成的任务：

＆＃13;

$(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);
}

＆＃13;

<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>

＆＃13;

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

通过Radio和Checkbox

2 个答案: