限制 javascript 自动生成的复选框的数量

Posted 2023-05-09

【中文标题】限制 javascript 自动生成的复选框的数量

【英文标题】：Limit number of javascript automated generated checkbox

【发布时间】：2020-11-16 02:29:22

【问题描述】：

有点担心以下代码应该自动生成复选框内容并限制最多 3 个复选框。

两个代码分别工作正常，当它们组合时出现问题：

Fiddle

$('input[type=checkbox]').change(function(e) 
  if ($('input[type=checkbox]:checked').length > 3) 
    $(this).prop('checked', false);
  
)

var skills = ["centres", "tirs", "dribbles", "passes", "vitesse"]
var skillContainer = $("#skillsContainer");
skills.forEach(skill => skillContainer.append('<li> <input type=\"checkbox\" id=\"' + skill + '\" value=\"' + skill + '\"> <label for=\"' + skill + '\"> ' + skill + ' </label> </li>'));

$("#skillsContainer").append(checkboxElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="competencies" action="algo.php" method="POST">

  <div class="container">
    <ul class="ks-cboxtags" id="skillsContainer">
      <input class="button" type="submit" value="Valider">
    </ul>
  </div>
</form>

【问题讨论】：

我给你做了一个sn-p。您的代码中没有 checkboxElement

【参考方案1】：

你是说这个吗？

创建动态元素时需要委托

或者在生成之后添加事件处理程序

$('#skillsContainer').on("change", 'input[type=checkbox]', function(e) 
  if ($('input[type=checkbox]:checked').length > 3) 
    $(this).prop('checked', false);
  
)

var skills = ["centres", "tirs", "dribbles", "passes", "vitesse"]
$("#skillsContainer").html(skills.map(skill => '<li> <input type=\"checkbox\" id=\"' + skill + '\" value=\"' + skill + '\"> <label for=\"' + skill + '\"> ' + skill + ' </label> </li>').join(""));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="competencies" action="algo.php" method="POST">

  <div class="container">
    <ul class="ks-cboxtags" id="skillsContainer">
      <input class="button" type="submit" value="Valider">
    </ul>
  </div>
</form>

【讨论】：

只需为这个完美的答案添加一点注释。 OP 代码不起作用，因为当它逐行运行时，没有诸如输入复选框之类的元素，因此$('input[type=checkbox]') 找不到任何东西，change 事件也不起作用。因此更改代码的顺序也可以解决您的问题（将change 事件移至底部）。

@SMAKSS 是的，应该详细说明。我已经更新了我的答案

@mplungjan 和 SMAKSS，它就像一个魅力！非常感谢！

【参考方案2】：

纯javascript检查复选框长度

var eLength = element.length;
var i = 0;
var checkedCheck;
checkbox.forEach(checkBox => 
     checkBox.addEventListener('click',function()
          if(this.checked)
              i++;
              if(i > 3)
                  checkBox.disabled = true;
                  alert('Limit reached');
              
        
    );
);