javascript - 如果选中了一个特定的 jQuery，则禁用其他复选框

Question

我有一组单选按钮，如果选择“否”，它会显示一个带有 6 个复选框（不同名称/ID）的 DIV，如果选中“无”，我需要禁用其他按钮（如果“无”则再次启用未选中）我还需要标签将类text-black-50添加到禁用的复选框中，就像我在下面的代码中添加到笔记本电脑复选框一样。

这是我所拥有的演示：

function toggleRequired() {

  var isITNoChecked = $('#StandardITPackageNo').is(':checked');


  $('[name="Laptop"').prop('required', isITNoChecked);
}


function toggleHidden() {


  var isITNoChecked = $('#StandardITPackageNo').is(':checked');

  $('#StandardITPackage').toggleClass('hidden', !isITNoChecked);
}

$('[name="Laptop"]').on('change', function() {
  toggleRequired();
  toggleHidden();

});

$('[name="StandardITPackage"]').on('change', function() {
  toggleRequired();
  toggleHidden();

});

function CompanyITPackageFunction() {
  var x = document.getElementById("StandardITPackage");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function CompanyITPackageFunctionClose() {
  var x = document.getElementById("StandardITPackage");
  if (x.style.display === "none") {
    x.style.display = "none";
  } else {
    x.style.display = "none";
  }
}

.hidden {
  display: none;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<table>
  <tr>
    <td><b>Standard IT Package? :</b></td>
    <td>

      <label class="container" style="margin-top: 15px;">Ja
          <input type="radio" id="StandardITPackageYes" name="StandardITPackage" value="yes" data-parsley-errors-container="#CompanyITPackage-errors" required>
          <span class="radio"></span>
      </label>

    </td>
    <td>

      <label class="container" style="margin-top: 15px;">Nej
        <input type="radio" id="StandardITPackageNo" name="StandardITPackage" value="no">
        <span class="radio"></span>
      </label>

    </td>
  </tr>
</table>



<div id="StandardITPackage" class="hidden">

  <br>
  <table cellpadding="6" valign="top" style="width: 400px;">
    <tr style="border-bottom: 0px solid #FFFFFF;">
      <td>

        <label class="container text-black-50">Laptop
                          <input type="checkbox" id="Laptop" name="Laptop" value="yes" data-parsley-checkmin="1" data-parsley-errors-container="#equipment-errors" data-parsley-error-message="Der skal vælges minimum ét felt" data-parsley-multiple="equipment" required>
                          <span class="checkmark"></span>
                        </label>


      </td>
      <td>

        <label class="container">Headset
                          <input type="checkbox" id="Headset" name="Headset" value="yes" data-parsley-multiple="equipment">
                          <span class="checkmark"></span>
                        </label>


      </td>
    </tr>
    <tr style="border-bottom: 0px solid #FFFFFF;">
      <td>

        <label class="container">Mus & Tastatur
                          <input type="checkbox" id="MouseKeyboard" name="MouseKeyboard" value="yes" data-parsley-multiple="equipment">
                          <span class="checkmark"></span>
                        </label>


      </td>
      <td>

        <label class="container">DockingStation
                          <input type="checkbox" id="DockingStation" name="DockingStation" value="yes" data-parsley-multiple="equipment">
                          <span class="checkmark"></span>
                        </label>


      </td>
    </tr>
    <tr style="border-bottom: 0px solid #FFFFFF;">
      <td>

        <label class="container">Display
                          <input type="checkbox" id="Display" name="Display" value="yes" data-parsley-multiple="equipment">
                          <span class="checkmark"></span>
                        </label>


      </td>
      <td>

        <label class="container"><i>None</i>
                          <input type="checkbox" id="NoEquipMent" name="NoEquipMent" value="yes" data-parsley-multiple="equipment">
                          <span class="checkmark"></span>
                        </label>


      </td>
    </tr>
  </table>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

我怎样才能将它与我在其中的其他脚本结合起来？

标签： javascriptjquerybootstrap-4

Answer 1

这可以解决问题：

$('#NoEquipMent').on('click', function(){
    var checkboxes = $(this).closest('table').find(':checkbox:not(:last)');
    var labels = $(this).closest('table').find('label:not(:last)');

    if($(this).is(':checked')){
        checkboxes.attr('disabled', 'disabled');
        labels.addClass('text-black-50');
    }
    else{
        checkboxes.removeAttr('disabled');
        labels.removeClass('text-black-50');
    }
});

https://jsfiddle.net/s75ypcun/2/