如果三个单选按钮都为 false，则不验证

Question

我有三个不同的代码块，带有单选按钮。

唯一改变的是 ID 和它们的名称。

我需要的是：如果value="false"上的所有单选按钮都被选中（用户选择选中所有"no"），表单将无效。

我目前正在使用 jQuery 验证，我所需要的只是单选按钮都是必需的。

我尝试使用此代码，但它不起作用。

registerForm.validate({
      rules: {
        'data': {
          required: {
            depends: function() {
              return $('.yesandno').is(':checked').val() === "false";
            }
          }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="radio" class="yesandno" id="yes-balance" tabindex='9' name="data" value="true" />
  <label for="yes-balance" class="yes">YES</label>
  <input type="radio" class="yesandno" id="no-balance" tabindex='9' name="data" value="false" />
  <label for="no-balance" class="no">NO</label>
</div>

编辑：最后，我将 Ele 的代码回复与我正在处理的门户网站上使用的 jQuery 验证插件混合在一起。这是代码：

    submitHandler: function(form) {
            $('#btn-register').click(() => {
              if ($('.yesandno:checked[value="false"]').size() === 3) {
                return false;
              } else {
                form.submit();
              }
            });
        }

Answer 1

您可以使用过滤器并检查长度：

// this filter will only return radios that are checked and have a value of false
$('.yesandno').filter(function() {
   return this.checked && this.value === "false";
}).length === 3;

Answer 2

您可以选中至少一个 true 值来通过验证，而不是选中所有三个单选按钮 false 来验证失败。这将有助于缩放您的 HTML 单选选项，而无需一次又一次地更改 JQuery 代码以匹配 false 选项选择的长度。

function passValidation(){
    $('.yesandno').filter(function() {
       return this.checked && this.value === "true";
    }).length > 0;
}

在验证期间调用 passValidation() 函数，如果它 returns true 则至少有一个单选按钮选择了 Yes 选项。而 passValidation() 中的 false 表示未选择 Yes 选项。

Answer 3

使用 jQuery 选择器你可以做到这一点

$('.yesandno:checked[value="false"]').size() === 3

看看这段代码

$('button').click(() => {
  if ($('.yesandno:checked[value="false"]').size() === 3) {
    console.log('All radionbuttos were checked to NO');
  } else {
    console.log('Either at least one Radionbutto is YES or a (YES/NO) radiobutton was not still checked!');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="radio" class="yesandno" id="yes-balance" tabindex='9' name="data" value="true" />
  <label for="yes-balance" class="yes">YES</label>
  <input type="radio" class="yesandno" id="no-balance" tabindex='9' name="data" value="false" />
  <label for="no-balance" class="no">NO</label>
</div>
<div>
  <input type="radio" class="yesandno" id="yes-balance" tabindex='9' name="data2" value="true" />
  <label for="yes-balance" class="yes">YES</label>
  <input type="radio" class="yesandno" id="no-balance" tabindex='9' name="data2" value="false" />
  <label for="no-balance" class="no">NO</label>
</div>
<div>
  <input type="radio" class="yesandno" id="yes-balance" tabindex='9' name="data3" value="true" />
  <label for="yes-balance" class="yes">YES</label>
  <input type="radio" class="yesandno" id="no-balance" tabindex='9' name="data3" value="false" />
  <label for="no-balance" class="no">NO</label>
</div>
<br>
<button>Click to see selected value!</button>

看到了吗？当 size === 3 时，条件是 true。

如果三个单选按钮都为 false，则不验证

If all three radio buttons are false, don't validate

html

javascript

jquery

jquery-validate