Если в группе установлен один флажок, отключите и снимите все остальные флажки - PullRequest
Новая
       4

Если в группе установлен один флажок, отключите и снимите все остальные флажки

0 голосов
/ 19 марта 2019

Таким образом, в коде ниже, 

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 должны быть не отмечены и недоступны для выбора.Я хочу, чтобы пользователь мог выбирать только один отчет за раз, при этом параметры этого отчета будут доступны только для выбора.Любая помощь очень ценится.

Фрагмент: -

Ответы [ 2 ]

0 голосов
/ 08 мая 2019

Вот простая проверка 

$("#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>
0 голосов
/ 08 мая 2019 

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...