javascript - 如果未选中任何框，则 javascript 避免提交

Question

！你好，

我有许多用 PHP 生成的复选框。有一个验证按钮。我想防止用户在不检查至少 1 个复选框的情况下验证表单。

我有这个代码

var checkboxes = document.getElementsByName('date[]');
var btn = document.getElementById('Submit');
date.onchange = function(){
   for (var i=0;i<checkboxes.length;i++)
   {
      if(checkboxes[i].checked)
      {
         btn.disabled = false;
      } 
      else 
      {
         btn.disabled = true;
      }
   }
}
<form>
....
<table>
    <tr id="{{ cpt }}">
        <td><input type="checkbox" class="date" id="date" name="date[]"
                            checked value="{{ jdv.day }}"></td>
        <td>{{ jdv.day }}</td>
   </tr>
</table> 
</form>

但它只适用于第一个复选框！

你能帮助我吗？

谢谢

Answer 1

您的脚本将为button.disabled = true;每个未选中的复选框设置...这意味着如果您选中除最后一个之外的任何框，这将始终设置 disabled 为 true。

之后将此添加到您的函数中btn.disabled = false;

return true;

导致此代码：

var checkboxes = document.getElementsByName('date[]');
var btn = document.getElementById('Submit');
date.onchange = function(){
   for (var i=0;i<checkboxes.length;i++)
   {
      if(checkboxes[i].checked)
      {
         btn.disabled = false;
         return true;
      } 
      else 
      {
         btn.disabled = true;
      }
   }
}

一旦检测到第一个选中的复选框，这将停止您的功能，并防止以下复选框覆盖disabled按钮的属性。

Answer 2

您应该保留一个变量，避免其他复选框结果相互覆盖。

就像是：

var toShow = true;
var checkboxes = document.getElementsByName('date[]');
var btn = document.getElementById('Submit');
date.onchange = function(){
for (var i=0;i<checkboxes.length && toShow;i++) {
    if(!checkboxes[i].checked)
    {
         toShow = false;
    }
}
if(toShow)
    btn.disabled = false;
} else 
{
    btn.disabled = true;
}

Answer 3

你最好做一些计数器来计算选中的复选框，最后将它与选中复选框的最小数量进行比较