Question

我需要验证来核对复选框HTML。我使用下面的代码

$("input[name='thinkingass[]']").change(function(){
    if ($("input[name='thinkingass[]']:checked").length > 2) {
        $(this).prop('checked', false);
        swal("allowed only 2 answer");
    }
});

我的HTML在第一个加载页面下面

<input name="thinkingass[]" value="Abstract Random" data-option="c" type="checkbox">
<input name="thinkingass[]" value="Concrete Sequential" data-option="a" type="checkbox">
<input name="thinkingass[]" value="Concrete Random" data-option="b" type="checkbox">

我的代码验证适用于上面的HTML。当我通过JQuery更改HTML（只是不同的数字和值）。你可以看下面

    <input name="thinkingass[]" value="Concrete Sequential" data-option="c" type="checkbox">
<input name="thinkingass[]" value="Abstract Random" data-option="a" type="checkbox">
<input name="thinkingass[]" value="Concrete Random" data-option="b" type="checkbox">

提前致谢

解决

我在新HTML中使用Javascript。在每个复选框HTML中调用一个函数。感谢GUYS的答案

Answer 1

如果重写DOM，则需要委派。

从DOM中删除元素或在定义事件处理程序后插入元素时，所有事件处理程序都将丢失

找到最近的静态容器并将事件处理程序添加到该容器中： $("#inputContainerID").on("change","input[name='thinkingass[]']",function(){

显示HTML的委派和替换的示例

＆＃13;

$(function() {
  $("#container").on("change", "input[name='thinkingass[]']", function() {
    if ($("input[name='thinkingass[]']:checked").length > 2) {
      $(this).prop('checked', false);
      alert("allowed only 2 answer");
    }
  });
});

function changeIt() {
  var html = `<label><input name="thinkingass[]" value="Concrete Sequential" data-option="c" type="checkbox" />Concrete Sequential</label><br/>
  <label><input name="thinkingass[]" value="Abstract Random" data-option="a" type="checkbox">Abstract Random</label><br/>
  <label><input name="thinkingass[]" value="Concrete Random" data-option="b" type="checkbox">Concrete Random</label>`
  $("#container").html(html);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">
  <label><input name="thinkingass[]" value="Concrete Random" data-option="b" type="checkbox">Concrete Random</label><br/>
  <label><input name="thinkingass[]" value="Concrete Sequential" data-option="c" type="checkbox" />Concrete Sequential</label><br/>
  <label><input name="thinkingass[]" value="Abstract Random" data-option="a" type="checkbox">Abstract Random</label>
</div>
<button onclick="changeIt()">Change</button>

＆＃13;

或者不要重写DOM，而是将其改组。您没有发布足够的代码来查看如何移动输入

Answer 2

您可能正在添加新输入，而不是更改其值，对吧？如果是这种情况，则问题在于您创建了与输入直接关联的事件，以便当DOM加载到当时存在的输入时事件将关联，但创建的新输入不会发生。得到那种联想。

解决方案是创建委托事件，这意味着您将事件与外部元素相关联，外部元素始终存在并定义将影响其所有内部元素的特定事件（您委派该事件）。

我们无法看到你的其余代码，所以想象一下你在div中有所有输入......

<div id="myinputs">
    <input name="thinkingass[]" value="Abstract Random" data-option="c" type="checkbox">
    <input name="thinkingass[]" value="Concrete Sequential" data-option="a" type="checkbox">
    <input name="thinkingass[]" value="Concrete Random" data-option="b" type="checkbox">
</div>

...你可以创建这样的事件......

$('div#myinputs').on('change','input[name="thinkingass[]"]',function() {
    if ($("input[name='thinkingass[]']:checked").length > 2) {
        $(this).prop('checked', false);
        swal("allowed only 2 answer");
    }
});

对于您的情况，只需更改输入为（form，div等）的当前元素之一div#myinputs。

我希望它有所帮助

Answer 3

它应该工作，你得到什么错误，检查控制台日志，更多使用复选框选择器来查找元素。

$( "input:checkbox").change(function(){ 
if ($("input[name='thinkingass[]']:checked").length > 2) {
        $(this).prop('checked', false);
        alert("allowed only 2 answer");
    }}

HTML更改时，验证限制复选框不起作用

3 个答案: