如果未选中无线电，则禁用按钮。 选中时启用

Question

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

这是我的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>

Answer 1

您将不得不稍微重新考虑您希望应用程序的 UX 如何工作，因为禁用的元素不会产生事件。

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

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