Jquery 限制复选框选择不起作用

Question

我的表格很复杂，可以有相同 class 甚至名称的相似复选框。所以我需要他们中的一些人限制检查一次以上。我找到了如何做到这一点的好例子，但其中 none 对我有用。有人可以看看并说出我做错了什么谢谢。当按下绿色按钮时，脚本会生成类似的表单，所以我需要允许复选框 pagrindines 在所有生成的表单中 select 一次，如果没有 selected 不能再出现在其他地方当然会很棒 de select 并在另一个复选框中进行更改。

$('#skaicius').val(2);
$(document).ready(function(){
 $('#duomenys').submit(function(){
  $('#skaicius').val($('.fieldGroup').length*1+1);
 })
    //papildomu pareigu limitas
    var maxGroup = 10;
    //$('#skaicius').val(2);
    //papildomu pareigu pridejimas
    $(".prideti").click(function(){
        if($('body').find('.fieldGroup').length < maxGroup){
            var fieldHTML = '<div class="row form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
            $('body').find('.fieldGroup:last').after(fieldHTML);
   
        }else{
            alert('Viršintas didžiausias papildomų pareigų skaičius.');
        }
    });
 
 
 $(document).on("change",".form-check-input",function(){
  var inputklase =$(this).attr("name");
  //console.log(inputklase);
  $(this).closest("div").find("input."+inputklase).val($(this).is(":checked")?1:0);
   
 })    
 
    //papildomu pareigu salinimas
    $("body").on("click",".salinti",function(){ 
        $(this).parents(".fieldGroup").remove();
  
    });
 
 /* not working limit
 var $ckb = $(":checkbox[name=pagrindines1]").on("change", function(){
 
 var $checked = $ckb.filter(":checked");
 $ckb.not($checked).prop("disabled", $checked.length >= 1);


 });
 */
 
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/04b00d367c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

   <div class="container">   
      <div class="row form-group fieldGroup">
      <h4>Darbuotojo pareigos</h4>
      <div style="position: relative; top: 8px; left: 10px;"><a href="javascript:void(0)" class="tbtn-print btn-sm btn-success prideti" title="[Pridėti pareigas]"><span class="fas fa-plus"></span></a></div>
                            <div class="col-md-12">
                                <label class="text-black" for="kodas">Tabelio nr.</label>
                                <input type="text" id="tabelis" name="tabelio_numeris[]" class="form-control">
                            </div>
       <div class="col-md-12">
                                <label class="text-black" for="imone">Įmonė</label>
                                <select class="form-control" name="imone[]" >
          @foreach ($imones as $imone)
                                        <option value="{{$imone->id}}">{{$imone->pavadinimas}}</option>
          @endforeach
                                </select>
                            </div>
                            <div class="col-md-12">
                                <label class="text-black" for="miestas">Miestas</label>
                                <select class="form-control" name="miestas[]" >
                                    @foreach($miestai as $miestas)
                                        <option value="{{$miestas->pavadinimas}}">{{$miestas->pavadinimas}}</option>
                                    @endforeach
                                </select>
                            </div>
       <div class="col-md-2">
                                <label class="text-black" for="test2">Pad. kodas</label>
                                <input type="text" id="test2" name="padkodas[]" class="form-control">
                            </div>
       <div class="col-md-10">
                                <label class="text-black" for="padalinys">Padalinys</label>
                                <select class="form-control" name="padalinys[]" >
                                        @foreach ($padaliniai as $p)
                                        <option value="{{$p->kodas}}">{{$p->padalinys}} - {{$p->kodas}}</option>
          @endforeach
                                </select>
                            </div>
       <div class="col-md-2">
                                <label class="text-black" for="test2">Pareigu kodas</label>
                                <input type="text" id="test2" name="parkodas[]" class="form-control">
                            </div>
       <div class="col-md-10">
                                <label class="text-black" for="pareigos">Pareigos</label>
                                <select class="form-control" name="pareigos[]" >
                                        @foreach ($pareigos as $par)
                                        <option value="{{$par->kodas}}">{{$par->pavadinimas}} - {{$par->kodas}}</option>
          @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="text-black" for="dpradzia">Darbo pradžia</label>
                                <input type="date" id="darbo_pradzia" name="darbo_pradzia" class="form-control">
                            </div>


                            <div class="col-md-6">
                                <label class="text-black" for="bandomasis_laikotarpis">Bandomasis laikotarpis</label>
                                <input type="date" id="bandomasis_laikotarpis" name="bandomasis_laikotarpis" class="form-control">
                            </div>


                            <div class="col-md-6">
                                <label class="text-black" for="terminuota_sutartis">Terminuota sutartis</label>
                                <input type="date" id="terminuota_sutartis" name="terminuota_sutartis" class="form-control">
                            </div>

                            <div class="col-md-6">
                                <label class="text-black" for="atldata">Atleidimo data</label>
                                <input type="date" id="atldata" name="atleidimo_data" class="form-control">
                            </div>

       
       <div class="col-md-12">
                                <input type="checkbox" name="vadovas1" style="margin-left: 5px; margin-top:10px;" class="form-check-input" value="1" >
        <input class="vadovas1" type="hidden" name="vadovas[]" value="0">
        <label class="form-check-label" style="margin-left: 25px; margin-top:5px;" id="vadovastxt">Vadovas</label>
                            </div>
       <div class="col-md-12">
                                <input type="checkbox" style="margin-left: 5px; margin-top:10px;" class="form-check-input pagrindines" value="1" name="pagrindines1" >
        <input class="pagrindines1" type="hidden" name="pagrindines[]" value="0">
        <label class="form-check-label" style="margin-left: 25px; margin-top:5px;" id="pagrindinestxt">Pagrindinės (Generuoti barkodą pagal šią kortelę.)</label>
                            </div>
                        </div>
      <!-- Papildomos pareigos -->
      <div class="row form-group fieldGroupCopy" style="display: none;" >
      <h4>Papildomos pareigos</h4>
      <div style="position: relative; top: 8px; left: 10px;"><a href="javascript:void(0)" class="tbtn-print btn-sm btn-danger salinti" title="[Šalinti]"><span class="fas fa-minus"></span></a></div>
                            <div class="col-md-12">
                                <label class="text-black" for="kodas">Tabelio nr.</label>
                                <input type="text" id="tabelis" name="tabelio_numeris[]" class="form-control">
                            </div>
       <div class="col-md-12">
                                <label class="text-black" for="imone">Įmonė</label>
                                <select class="form-control" name="imone[]" >
          @foreach ($imones as $imone)
                                        <option value="{{$imone->id}}">{{$imone->pavadinimas}}</option>
          @endforeach
                                </select>
                            </div>
                            <div class="col-md-12">
                                <label class="text-black" for="miestas">Miestas</label>
                                <select class="form-control" name="miestas[]" >
                                    @foreach($miestai as $miestas)
                                        <option value="{{$miestas->pavadinimas}}">{{$miestas->pavadinimas}}</option>
                                    @endforeach
                                </select>
                            </div>
       <div class="col-md-2">
                                <label class="text-black" for="test2">Pad. kodas</label>
                                <input type="text" id="test2" name="padkodas[]" class="form-control">
                            </div>
       <div class="col-md-10">
                                <label class="text-black" for="padalinys">Padalinys</label>
                                <select class="form-control" name="padalinys[]" >
                                        @foreach ($padaliniai as $p)
                                        <option value="{{$p->kodas}}">{{$p->padalinys}} - {{$p->kodas}}</option>
          @endforeach
                                </select>
                            </div>
       <div class="col-md-2">
                                <label class="text-black" for="test2">Pareigu kodas</label>
                                <input type="text" id="test2" name="parkodas[]" class="form-control">
                            </div>
       <div class="col-md-10">
                                <label class="text-black" for="pareigos">Pareigos</label>
                                <select class="form-control" name="pareigos[]" >
                                        @foreach ($pareigos as $par)
                                        <option value="{{$par->kodas}}">{{$par->pavadinimas}} - {{$par->kodas}}</option>
          @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="text-black" for="dpradzia">Darbo pradžia</label>
                                <input type="date" id="darbo_pradzia" name="darbo_pradzia" class="form-control">
                            </div>


                            <div class="col-md-6">
                                <label class="text-black" for="bandomasis_laikotarpis">Bandomasis laikotarpis</label>
                                <input type="date" id="bandomasis_laikotarpis" name="bandomasis_laikotarpis" class="form-control">
                            </div>


                            <div class="col-md-6">
                                <label class="text-black" for="terminuota_sutartis">Terminuota sutartis</label>
                                <input type="date" id="terminuota_sutartis" name="terminuota_sutartis" class="form-control">
                            </div>

                            <div class="col-md-6">
                                <label class="text-black" for="atldata">Atleidimo data</label>
                                <input type="date" id="atldata" name="atleidimo_data" class="form-control">
                            </div>

       
       <div class="col-md-12">
                                <input type="checkbox" name="vadovas1" style="margin-left: 5px; margin-top:10px;" class="form-check-input" value="1" >
        <input class="vadovas1" type="hidden" name="vadovas[]" value="0">
        <label class="form-check-label" style="margin-left: 25px; margin-top:5px;" id="vadovastxt">Vadovas</label>
                            </div>
       <div class="col-md-12">
                                <input type="checkbox" style="margin-left: 5px; margin-top:10px;" class="form-check-input pagrindines" name="pagrindines1" >
        <input class="pagrindines1" type="hidden" name="pagrindines[]" value="0">
        <label class="form-check-label" style="margin-left: 25px; margin-top:5px;" id="pagrindinestxt">Pagrindinės (Generuoti barkodą pagal šią kortelę.)</label>
                            </div>
                        </div>
      <!-- Papildomos pareigos pabaiga -->
      
   </div>

Answer 1

如果名称为 pagrindines1 的复选框是动态添加的，则必须从初始加载页面时已经存在的静态父元素委托 change() 事件，例如来自 $(document)，使用 on().

 $(document).on("change", ":checkbox[name=pagrindines1]", function() {
    var $ckb = $(":checkbox[name=pagrindines1]");
    var $checked = $ckb.filter(":checked");
    $ckb.not($checked).prop("disabled", $checked.length >= 1);
 });

Jquery 限制复选框选择不起作用

Jquery limit checkbox selection doesn't work

checkbox

jquery

limit