2016-12-08 3 views
-1

Я использую цикл foreach для создания флажков в моей форме. Он приведен ниже.Невозможно ограничить количество флажков, которые нужно выбрать

<?php $index = 0; 
foreach($cameramen as $n_key){ ?> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox" id="cameramen_<?php echo $index+1; ?>" name="cameramen" class="subscriber" value="<?php echo $index+1; ?>"> 

      <?php 
       echo $n_key->emplist3; 
       $index++; 
      ?> 

     </label> 
    </div> 
    <br/><br/> 
<?php } ?> 

Я хочу ограничить количество флажков, которые будут выбраны пользователем двумя. Я использовал следующую функцию javascript, но не работал (он позволяет выбирать все флажки).

$("input[name=cameramen]").change(function(){ 
    var max= 2; 
    console.log($("input[name=cameramen]:checked").length); 
    if($("input[name=cameramen]:checked").length == max){ 
     $("input[name=cameramen]").attr('disabled', 'true'); 
     $("input[name=cameramen]:checked").removeAttr('disabled'); 
    }else{ 
     $("input[name=cameramen]").removeAttr('disabled'); 
    } 
    }); 

Кто-то, пожалуйста, помогите мне решить эту проблему, с которой я борюсь часами, чтобы решить.

+1

Хотя вы должны использовать '.prop()', а не '.attr()', ваш код должен работать так, как я его вижу. Возможно, вы привязываете событие до того, как флажки доступны в DOM. Вы завертываете его в готовый обработчик? Или делегировать событие, предложенное @ntgCleaner ниже ** ↓↓↓ ** –

+1

попробуйте использовать $ (document) .on ('change', 'input [name-cameramen]', function() {...} 'Также, скажите нам, как он не работает – ntgCleaner

+0

Я воспроизвел ваш код и, похоже, работает! Вы уверены, что все элементы ввода получили атрибут имени «оператор»? – FalcoB

ответ

0

Вы можете попробовать это:

$(document).ready(function(){ 
 

 
\t $(".cb").on('click', function(e) { 
 
    \t var count = 0; 
 
    \t var list = $('.cb'); 
 
    
 
    $('.cb').each(function(i) { 
 
    \t 
 
     if($(this).is(':checked')) { 
 
     \t count++; 
 
     } 
 
     
 
    }); 
 
    
 
    if(count > 2) 
 
    { 
 
    \t alert('You cannot check more than 2 checkboxes!'); 
 
    \t $(this).prop('checked', false); 
 
     
 
     //return false; 
 
    } else { 
 
    \t return true; 
 
    } 
 
    
 
    }); 
 

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

 
    <input class="cb" type="checkbox">Checkbox 1 
 
    <br /> 
 
    <input class="cb" type="checkbox">Checkbox 2 
 
    <br /> 
 
    <input class="cb" type="checkbox">Checkbox 3 
 
    <br /> 
 
    <input class="cb" type="checkbox">Checkbox 4 
 

 
</div>

Надеется, что это помогает!

Смежные вопросы