Question

我的表单有一些问题（电子邮件，电话号码），然后用户可以选择是否应该为会议的注册类型（在本例中为RT 001和RT 002）包含该字段，以及对于每种注册类型，该字段应该是强制的。（布局：https://ibb.co/kftnPc）

我在下面输入以下代码，以及＃34; mandatorycheckbox＆＃34;检查类是否输入＆＃34; rtypecheckbox＆＃34;也检查。因为如果该字段对于特定的注册类型是强制性的，则需要将其包含在该特定注册类型的注册表中：

 $(function() {
      $('.mandatorycheckbox').change(function() {
       if (this.checked)
          $('.rtypecheckbox').prop('checked', true);
      });
});

问题：

问题在于，当一些＆＃34;强制要求RT 001＆＃34;或＆＃34; RT 002和＃34;输入全部检查＆＃34;包括注册类型...＆＃34;检查。

但我只想要那个，例如，如果复选框＆＃34;强制要求RT 001＆＃34;检查＆＃34;包含注册类型RT 001＆＃34;并且不检查所有输入＆＃34;包括注册类型......＆＃34;。

你知道怎么做吗？

Html（在这种情况下会议有两个问题）：

    <form method="post" class="clearfix"
          action="{{route('questions.update', ['conf_id' => $conf->id])}}" enctype="multipart/form-data">

  <table class="table table-striped table-responsive-sm">
  <thead>
    <tr>
      <th scope="col">Info</th>
      <th scope="col">Include for registration type</th>
      <th scope="col">Mandatory Field</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>whats your phone number?</td>
      <td>
        <div class="form-check">
          <input autocomplete="off" name="question[1][rtypes][]" class="form-check-input rtypecheckbox" type="checkbox" value="1" id="1">
          <label class="form-check-label" for="exampleRadios1">
            include for registration type "general"
          </label>
        </div>
        <div class="form-check">
          <input autocomplete="off" name="question[1][rtypes][]" class="form-check-input rtypecheckbox" type="checkbox" value="2" id="2">
          <label class="form-check-label" for="exampleRadios1">
            include for registration "plus"
          </label>
        </div>
      </td>
      <td>
        <div class="form-check">
          <input autocomplete="off"  name="question[1][mandatories][]"
                 class="form-check-input mandatorycheckbox" type="checkbox" value="1" id="1">
          <label class="form-check-label" for="exampleRadios1">
            for the registration type "general"
          </label>
        </div>
        <div class="form-check">
          <input autocomplete="off"  name="question[1][mandatories][]"
                 class="form-check-input mandatorycheckbox" type="checkbox" value="2" id="2">
          <label class="form-check-label" for="exampleRadios1">
            for the registration type "plus"
          </label>
        </div>
      </td>
    </tr>
    <tr>
      <td>Whats your email?</td>
      <td>
        <div class="form-check">
          <input autocomplete="off" name="question[2][rtypes][]" class="form-check-input rtypecheckbox" type="checkbox" value="1" id="1">
          <label class="form-check-label" for="exampleRadios1">
             include for registration "general"
          </label>
        </div>
        <div class="form-check">
          <input autocomplete="off" name="question[2][rtypes][]" class="form-check-input rtypecheckbox" type="checkbox" value="2" id="2">
          <label class="form-check-label" for="exampleRadios1">
             include for registration "plus"
          </label>
        </div>
      </td>
      <td>
        <div class="form-check">
          <input autocomplete="off"  name="question[2][mandatories][]"
                 class="form-check-input mandatorycheckbox" type="checkbox" value="1" id="1">
          <label class="form-check-label" for="exampleRadios1">
            for the registration type "geral"
          </label>
        </div>
        <div class="form-check">
          <input autocomplete="off"  name="question[2][mandatories][]"
                 class="form-check-input mandatorycheckbox" type="checkbox" value="2" id="2">
          <label class="form-check-label" for="exampleRadios1">
            for the registration type "plus"
          </label>
        </div>
      </td>
    </tr>

  </tbody>
</table>

Answer 1

您应该使用id选择器而不是类选择器，并使每个复选框具有唯一ID。像这样的例子：

$(function() {
      $('.mandatorycheckbox').change(function() {
       if (this.checked)
          $('#id1').prop('checked', true);
          $('#id2').prop('checked', true);
      });
});

Answer 2

提供不同的复选框（对于＆＃34;一般＆＃34;和＆＃34;加＆＃34;注册类型）其他类别，例如general和plus。同样，您可以为强制性复选框指定相同的附加类。例如基于你的小提琴：

  <tr>
    <td>whats your phone number?</td>
    <td>
      <div class="form-check">
        <input autocomplete="off" name="question[1][rtypes][]" class="form-check-input rtypecheckbox general" type="checkbox" value="1" id="1">
        <label class="form-check-label" for="exampleRadios1">
          include for registration type "general"
        </label>
      </div>
      <div class="form-check">
        <input autocomplete="off" name="question[1][rtypes][]" class="form-check-input rtypecheckbox plus" type="checkbox" value="2" id="2">
        <label class="form-check-label" for="exampleRadios1">
          include for registration "plus"
        </label>
      </div>
    </td>
    <td>
      <div class="form-check">
        <input autocomplete="off"  name="question[1][mandatories][]"
               class="form-check-input mandatorycheckbox general" type="checkbox" value="1" id="1">
        <label class="form-check-label" for="exampleRadios1">
          for the registration type "general"
        </label>
      </div>
      <div class="form-check">
        <input autocomplete="off"  name="question[1][mandatories][]"
               class="form-check-input mandatorycheckbox plus" type="checkbox" value="2" id="2">
        <label class="form-check-label" for="exampleRadios1">
          for the registration type "plus"
        </label>
      </div>
    </td>
  </tr>

然后你可以将javascript更改为

$(function() {
      $('.mandatorycheckbox').change(function() {
       if (this.checked) {
          if ($(this).hasClass('general')
              $('.rtypecheckbox.general').prop('checked', true);
          else if ($(this).hasClass('plus')
              $('.rtypecheckbox.plus').prop('checked', true);
       }
      });
});

如果课程必须是动态的，你可以试试像

这样的东西

var questionClasses = ['general', 'plus', 'xyz', ...];

$(function() {
      $('.mandatorycheckbox').change(function() {
       if (this.checked) {
          for (var i = 0; i < questionClasses.length; i++) {
              if ($(this).hasClass(questionClasses[i])
                  $('.rtypecheckbox.' + questionClasses[i]).prop('checked', true);
              }
       }
      });
});

选中其他特定复选框时，选中复选框无法正常工作

2 个答案: