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

enable/disable functionality buttons based on radio button

本文关键字：功能 按钮 单选按钮 启用      更新时间：2023-09-26

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

Javascript:

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

HTML:

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

监听器可以附加到表中，单选按钮集可以通过名称引用。当表中的单选按钮发生单击事件时，可以根据是否选中特定组中的任何按钮来启用或禁用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>
相关文章：