如果未选中收音机，则禁用按钮。选中时启用答案

【问题标题】：Disable button if radio is unchecked. Enable when checked如果未选中收音机，则禁用按钮。选中时启用
【发布时间】：2020-09-03 21:40:09
【问题描述】：

我的按钮在被禁用后似乎无法重新启用。目前，如果没有选中任何内容并且我将鼠标悬停在它上面，则该按钮将被禁用。如果我检查了某些内容，它会保持启用状态，但如果我首先将鼠标悬停在按钮上，没有检查任何内容，如果我检查了某些内容，我将无法重新启用它。

这是我的 JS：

var inputs = document.getElementsByTagName('input');
var letsCookButton = document.querySelector('#letsCook');

letsCookButton.addEventListener('mouseover', checkIfChecked);

function checkIfChecked() {
  letsCookButton.disabled = true;
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
      letsCookButton.disabled = false;
    }
  }
}

这是我的 HTML：

div class="mainBox" id="box-one">
          <p id="left-box-title">What are you looking for?<span>*</span></p>
          <ul>
            <li><input type="radio" name="food" id="side-food"> Side</li>
            <li><input type="radio" name="food" id="main-food"> Main Dish</li>
            <li><input type="radio" name="food" id="dessert-food"> Dessert</li>
            <li><input type="radio" name="food" id="entire-meal"> Entire Meal</li>
          </ul>
          <button id="letsCook">LET'S COOK!</button>
        </div>

【问题讨论】：

标签： javascript html error-handling radio-button

【解决方案1】：

您将不得不稍微重新考虑您希望应用的用户体验如何工作，因为disabled elements do not produce events。

由于至少有一个单选按钮在第一次点击后会保持选中状态，我建议从一开始就禁用该按钮，然后在单选点击事件中启用它。

<div class="mainBox" id="box-one">
  <p id="left-box-title">What are you looking for?<span>*</span></p>
  <ul id="radio-group">
    <li><input type="radio" name="food" id="side-food"> Side</li>
    <li><input type="radio" name="food" id="main-food"> Main Dish</li>
    <li><input type="radio" name="food" id="dessert-food"> Dessert</li>
    <li><input type="radio" name="food" id="entire-meal"> Entire Meal</li>
  </ul>
  <button id="letsCook" disabled>LET'S COOK!</button>
</div>

var inputGroup = document.querySelector('#radio-group');
var letsCookButton = document.querySelector('#letsCook');

inputGroup.addEventListener('click', function () {
    letsCookButton.removeAttribute('disabled')
});

JS Fiddle 中的工作示例：https://jsfiddle.net/Ollie1700/wxn9f63p/4/

【讨论】：