基于单选按钮启用/禁用功能按钮答案

【问题标题】：enable/disable functionality buttons based on radio button基于单选按钮启用/禁用功能按钮
【发布时间】：2011-09-15 22:34:16
【问题描述】：

当页面加载时，会显示一个带有单选按钮的表格。表下方的 3 个按钮 X、Y、Z 被禁用。当用户从表格中选择一个单选按钮时，应该启用这三个按钮 X、Y、Z 吗？

【问题讨论】：

我不清楚你在问什么。您是在问是否应该启用按钮，或者如何启用它们？

标签： javascript jquery

【解决方案1】：

Javascript：

$('table input[type="radio"]').click(function() {
    $('input[type="button"]').removeAttr('disabled');
});

HTML：

<table>
    <tr>
        <td><input type="radio" />...
...

<input type="button" disabled ... />

【讨论】：

为了 OP 的利益，他们应该考虑使用 ID 选择器或 CSS 选择器，以便在您单击任何单选按钮时不会启用页面上的每个按钮。
这个答案将为所有raido按钮添加一个onclick侦听器，包括禁用的按钮，这似乎不合适。为了对单选按钮进行分组，它们必须共享一个通用名称（示例中省略），因此按名称选择它们更有意义。如果没有选择单选按钮（这不应该发生，但许多网页忽略了良好的设计原则），那么 X、Y 和 Z 按钮应该再次被禁用似乎也是合理的。并且已经被禁用，如果有任何被选中，它们可能也应该被取消选中。

【解决方案2】：

可以将侦听器附加到表，并且可以按名称引用单选按钮集。当表格中的单选按钮发生单击事件时，可以根据是否选中特定组中的任何按钮来启用或禁用 X、Y 和 Z 按钮。逻辑需要考虑到表单被重置的情况，例如

<form>
  <table id="table0" style="border: 1px solid black;">
    <tr>
      <td><input type="radio" name="group1">
      <td><input type="radio" name="group1">
      <td><input type="radio" name="group1">
    <tr>
      <td><input type="reset">
      <td>
      <td>
  </table>
  <label for="r2-0">X&nbsp;<input type="radio" name="group2" id="r2-0" value="x"></label>
  <label for="r2-1">Y&nbsp;<input type="radio" name="group2" id="r2-1" value="y"></label>
  <label for="r2-2">Z&nbsp;<input type="radio" name="group2" id="r2-2" value="z"></label>
</form>

<script type="text/javascript">
function enableButtons() {
  var buttons1 = document.getElementsByName('group1');
  var buttons2 = document.getElementsByName('group2');
  var checkedState = false;

  // Check if any buttons in group 1 have been checked
  for (var i=0, iLen=buttons1.length; i<iLen; i++) {
    if (buttons1[i].checked) {
      checkedState = true;
      break;
    }
  }

  // Enable or disable group 2 buttons based on above result
  // When disabling, also uncheck any that are checked
  for (var j=0, jLen=buttons2.length; j<jLen; j++) {
    if (!checkedState) {
      buttons2[j].checked = false;
      buttons2[j].disabled = true;
    } else {
      buttons2[j].disabled = false;
    }
  }
}

window.onload = function() {

  // Disable X, Y & Z buttons
  var buttons = document.getElementsByName('group2');
  for (var i=0, iLen=buttons.length; i<iLen; i++) {
    buttons[i].disabled = true;
  }

  // Add onlick listener to table
  var table  = document.getElementById('table0');
  if (table) table.onclick = function() {
    window.setTimeout(enableButtons, 1);
  }
}

</script>

【讨论】：