Question

我有/无按钮询问用户是否观看体育比赛。如果他们标记为是，则用户需要检查适用的运动。如果答案为否，则不需要该部分。

如果用户标记是或否，我的代码工作正常，然后点击进入。但是当用户从是或否改变时问题就出现了。如果用户首先标记否，然后标记为是，则没有必需属性。如果相反的情况发生，则需要属性。请参阅下面的html和jquery。非常感谢任何帮助!!

＆＃13;

function selectatleastOne() {
  var requiredCheckboxes = $(':checkbox[required]');
  requiredCheckboxes.each(function() {
    this.setCustomValidity('Please select all that apply');
  });
  requiredCheckboxes.on('change', function(e) {
    var checkboxGroup = requiredCheckboxes.filter('[name="' + $(this).attr('name') + '"]');
    var isChecked = checkboxGroup.is(':checked');
    checkboxGroup.prop('required', !isChecked);
    checkboxGroup.each(function() {
      if (!isChecked) {
        this.setCustomValidity('Please select all that apply');
      } else {
        this.setCustomValidity('');
      }
    });
  });
}
jQuery(function($) {
  $('input:radio[name="yes_no"]').change(
    function() {
      if ($(this).is(':checked') && $(this).val() == 'yes') {
        $('[name="sport[]"]').attr('required');
        selectatleastOne();
      } else if ($(this).is(':checked') && $(this).val() == 'no') {
        $('[name="sport[]"]').removeAttr('required');
      }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action='index.php' method='POST'>
  <fieldset>
    <hr>
    <h4>Do you watch or play sports?
      <span class="yes_no" id="yes_radio"><input type="radio" name="yes_no" value="yes" required="required"> Yes</input></span>
      <span class="yes_no" id="no_radio"><input type="radio" name="yes_no" value="no" required="required"> No</input></h4></span>
      <div>
        <p><i>If yes, select all that apply:</i></p>
        <span class="selectall_clear" id="select_all">Select All</span>
        <span class="selectall_clear" id="clear">Clear</span></div>
      <br>
      <div class="checkbox">
        <label><input type="checkbox" name="sport[]" value="Athletics"  required="required"> Athletics</label><br>
        <label><input type="checkbox" name="sport[]" value="Badminton" required="required"> Badminton</label><br>
        <label><input type="checkbox" name="sport[]" value="Basketball"> Baseball</label><br>
        <label><input type="checkbox" name="sport[]" value="Boxing" required="required"> Boxing</label><br>
        <label><input type="checkbox" name="sport[]" value="Cricket" required="required"> Cricket</label><br>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" name="sport[]" value="Cycling" required="required"> Cycling</label><br>
        <label><input type="checkbox" name="sport[]" value="Field_Hockey" required="required"> Field Hockey</label><br>
        <label><input type="checkbox" name="sport[]" value="Football" required="required"> Football</label><br>
        <label><input type="checkbox" name="sport[]" value="Formula_1" required="required"> Formula 1</label><br>
        <label><input type="checkbox" name="sport[]" value="Golf" required="required"> Golf</label><br>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" name="sport[]" value="Gymnastics" required="required"> Gymnastics</label><br>
        <label><input type="checkbox" name="sport[]" value="Handball" required="required"> Handball</label><br>
        <label><input type="checkbox" name="sport[]" value="Ice_Hockey" required="required"> Ice Hockey</label><br>
        <label><input type="checkbox" name="sport[]" value="MMA" required="required"> MMA</label><br>
        <label><input type="checkbox" name="sport[]" value="MotoGP" required="required"> MotoGP</label><br>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" name="sport[]" value="Rugby" required="required"> Rugby</label><br>
        <label><input type="checkbox" name="sport[]" value="Skiing" required="required"> Skiing</label><br>
        <label><input type="checkbox" name="sport[]" value="Snooker" required="required"> Snooker</label><br>
        <label><input type="checkbox" name="sport[]" value="Soccer" required="required"> Soccer</label><br>
        <label><input type="checkbox" name="sport[]" value="Swimming" required="required"> Swimming</label><br>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" name="sport[]" value="Tennis" required="required"> Tennis</label><br>
        <label><input type="checkbox" name="sport[]" value="Table_Tennis" required="required"> Table Tennis</label><br>
        <label><input type="checkbox" name="sport[]" value="Volleyball" required="required"> Volleyball</label><br>
        <label><input type="checkbox" name="sport[]" value="Wrestling" required="required"> Wrestling</label><br>
        <label><input type="checkbox" name="sport[]" value="Other" required="required"> Other</label><br>
      </div>

  </fieldset>
  <hr>
  <button type='submit' name='submitted_questions' id='submit_questions'>Submit!</button>
</form>

＆＃13;

Answer 1

为什么没有＆＃34;要求＆＃34;属性设置正确吗？因为当用户点击“是”＆＃39;你正在打电话

$('[name="sport[]"]').attr('required');

返回属性的当前值。您希望设置属性，但是您应该调用它：

$('[name="sport[]"]').attr('required', true);

（这似乎只适用于第一次点击，因为该属性是默认设置的，所以第一次点击＆＃34;是＆＃34;无论如何都不会做任何事情。）

＆＃13;

$('input:radio[name="yes_no"]').change(function() {
  if ($(this).val() == 'yes') { // not necessary to check the :checked state here too
    $('[name="sport[]"]').attr('required', true);
  } else {
    $('[name="sport[]"]').removeAttr('required');
  }
});

＆＃13;

input:required {
  outline: 2px solid #F00/* so we can see the results easily */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<h4>Do you watch or play sports?
  <span class="yes_no" id="yes_radio"><input type="radio" name="yes_no" value="yes" required="required"> Yes</input></span>
  <span class="yes_no" id="no_radio"><input type="radio" name="yes_no" value="no" required="required"> No</input></h4></span>


  <div class="checkbox">
    <label><input type="checkbox" name="sport[]" value="Athletics" required="required"> Athletics</label><br>
    <label><input type="checkbox" name="sport[]" value="Badminton" required="required"> Badminton</label><br>
    <label><input type="checkbox" name="sport[]" value="Basketball" required> Baseball</label><br>
    <label><input type="checkbox" name="sport[]" value="Boxing" required="required"> Boxing</label><br>
    <label><input type="checkbox" name="sport[]" value="Cricket" required="required"> Cricket</label><br>
  </div>

＆＃13;

selectatleastOne()中的事件处理程序存在一个更实质性的问题 - 每次用户点击＆＃34;是＆＃34;时，它会为每个$(':checkbox[required]')附加一个新的更改处理程序，但它永远不会删除这些更改处理程序 - 因此，如果用户点击了＃34;否＆＃34;，并且如果用户点击＆＃34;是＆＃34;它们仍将触发两次他们每次输入都会发射两次。

您可以每次手动添加这些处理程序，只要您在用户点击＆＃34; No＆＃34;时使用$(...).off('change')删除它们，而不是不断地绑定和取消绑定相同的处理程序，只编写一个使用复选框的永久事件处理程序会更容易。要求国家决定是否采取任何行动：

$(':checkbox').on("change", function() {
  if ($(this).attr("required")) {
    // User has clicked "yes", do your validation
  } else {
    // User has clicked "no", so do nothing
  }
});

jQuery .attr（）没有设置属性

1 个答案: