Question

因此在下面的代码中，

function listen(element, event, callback) {
  if (element.attachEvent) {
    element.attachEvent('on' + event, callback);
  } else {
    element.addEventListener(event, callback);
  }
}

var form = document.querySelector('#myForm');
listen(form, 'click', function (event) {
  var checkBoxes, i, checked, target;
  target = event.srcElement || event.target;
  if (target.getAttribute('name') === 'check1') {
    checkBoxes = form.querySelectorAll('input[name="check2"]');
    checked = target.checked;
    for (i = 0; i < checkBoxes.length; i++) {
      checkBoxes[i].disabled = checked && checkBoxes[i] !== target;
    }
  }
});

<!DOCTYPE html>
<html>
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <form id="myForm">
      <table>
        <tr>
          <td> <input type='checkbox' name='check1' value = '1'>Report 1    </td>
          <td> <input type='checkbox' name='check1' value = '2'>R1 Option 1 </td>
          <td> <input type='checkbox' name='check1' value = '3'>R1 Option 2 </td>
          <td> <input type='checkbox' name='check1' value = '4'>R1 Option 3 </td>
        </tr>
        <tr>
          <td> <input type='checkbox' name='check2' value = '5'>Report 2    </td>
          <td> <input type='checkbox' name='check2' value = '6'>R2 Option 1 </td>
          <td> <input type='checkbox' name='check2' value = '7'>R2 Option 2 </td>
          <td> <input type='checkbox' name='check2' value = '8'>R2 Option 3 </td>
        </tr>
        <tr>
          <td> <input type='checkbox' name='check3' value = '5'>Report 3    </td>
          <td> <input type='checkbox' name='check3' value = '6'>R3 Option 1 </td>
          <td> <input type='checkbox' name='check3' value = '7'>R3 Option 2 </td>
          <td> <input type='checkbox' name='check3' value = '8'>R3 Option 3 </td>
        </tr>
      </table>
    </form>
  </body>
</html>

已选中报告1，应取消选中报告2和报告3以及报告2和报告3的所有选项，并且这些选项不可选择。我只希望用户一次只能选择一个报告，而该报告的选项仅可供选择。非常感谢您的协助。

摘要：-

Answer 1

$(document).ready(function () {
  $('input[type="checkbox"]').click(function () {
    if ($(this).prop("checked") == true) {
      $('input').on('change', function () {
        $('input').not(this).attr('disabled', true);
      });
    } else if ($(this).prop("checked") == false) {
      $('input').on('change', function () {
        $('input').not(this).attr('disabled', false);
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td> <input type='checkbox' name='check1' value = '1'>Report 1    </td>
    <td> <input type='checkbox' name='check1' value = '2'>R1 Option 1 </td>
    <td> <input type='checkbox' name='check1' value = '3'>R1 Option 2 </td>
    <td> <input type='checkbox' name='check1' value = '4'>R1 Option 3 </td>
  </tr>
  <tr>
    <td> <input type='checkbox' name='check2' value = '5'>Report 2    </td>
    <td> <input type='checkbox' name='check2' value = '6'>R2 Option 1 </td>
    <td> <input type='checkbox' name='check2' value = '7'>R2 Option 2 </td>
    <td> <input type='checkbox' name='check2' value = '8'>R2 Option 3 </td>
  </tr>
  <tr>
    <td> <input type='checkbox' name='check3' value = '5'>Report 3    </td>
    <td> <input type='checkbox' name='check3' value = '6'>R3 Option 1 </td>
    <td> <input type='checkbox' name='check3' value = '7'>R3 Option 2 </td>
    <td> <input type='checkbox' name='check3' value = '8'>R3 Option 3 </td>
  </tr>
</table>

Answer 2

这是一个简单的验证

$("#myForm").find("input[type='checkbox']").on("click", function(){
if ($(this).is(":checked"))
{
$("#myForm").find("input[type='checkbox']").not($(this)).prop("disabled", true)
}else 
{
$("#myForm").find("input[type='checkbox']").prop("disabled", false)
}
});

<!DOCTYPE html>
<html>
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <form id="myForm">
      <table>
        <tr>
          <td> <input type='checkbox' name='check1' value = '1'>Report 1    </td>
          <td> <input type='checkbox' name='check1' value = '2'>R1 Option 1 </td>
          <td> <input type='checkbox' name='check1' value = '3'>R1 Option 2 </td>
          <td> <input type='checkbox' name='check1' value = '4'>R1 Option 3 </td>
        </tr>
        <tr>
          <td> <input type='checkbox' name='check2' value = '5'>Report 2    </td>
          <td> <input type='checkbox' name='check2' value = '6'>R2 Option 1 </td>
          <td> <input type='checkbox' name='check2' value = '7'>R2 Option 2 </td>
          <td> <input type='checkbox' name='check2' value = '8'>R2 Option 3 </td>
        </tr>
        <tr>
          <td> <input type='checkbox' name='check3' value = '5'>Report 3    </td>
          <td> <input type='checkbox' name='check3' value = '6'>R3 Option 1 </td>
          <td> <input type='checkbox' name='check3' value = '7'>R3 Option 2 </td>
          <td> <input type='checkbox' name='check3' value = '8'>R3 Option 3 </td>
        </tr>
      </table>
    </form>
  </body>
</html>

当组中的一个复选框被选中时，禁用并取消选中所有其他复选框

2 个答案: