Сделать только 2 флажка в одной форме

Question

У меня есть несколько форм на одной странице с теми же именами ввода. Единственная разница между формами - это формы, которые их содержат.

Для групп флажков в моей форме я хочу разрешить только два флажка из трех, но я не хочу, чтобы флажки в одной форме влияли на другую.

У меня есть jsFiddle того, что у меня есть сейчас.

У меня есть настройка теперь, что только два флажка можно проверить из трех, но это для всего документа, а не для конкретного.

Формы на моей странице создаются с помощью цикла, и идентификатор формы является единственной разницей между ними.

Любой, кто может помочь с этим?

https://jsfiddle.net/likwidmonster/3zbs61q5/

$('input[type=checkbox][name=group]').on('change', function(e) { 
 
    if ($('input[type=checkbox][name=group]:checked').length < 2) { 
 
    $('input[type=checkbox][name=group]:not(:checked)').prop('disabled', false); 
 
    } 
 
    if ($('input[type=checkbox][name=group]:checked').length == 2) { 
 
    $('input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<h4> 
 
Form 1 
 
</h4> 
 
    <form id="form_1"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div> 
 

 
<div> 
 
<h4> 
 
Form 2 
 
</h4> 
 
    <form id="form_2"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div>

Answer 1

Поскольку ваши формы динамичны, возможно, это будет лучшего использования.

Я создал jsfiddle и разместил его в комментарии, но это только хорошо для этих двух форм. Может быть, вы хотите добавить еще? JSFiddle Demo

this.parentNode.id; 

this используется для целевого элемента запуска функции, .parentNode используются для получения элемента формы и .id используется для получения идентификатора формы, так что вы можете ориентировать эту конкретную форму означает, что вам нужно только один if условие для запуска этого для всех форм!

$('form input[type=checkbox][name=group]').on('change', function(e) { 
 
var MyForm=this.parentNode.id; 
 
    if ($('form[id='+MyForm+'] input[type=checkbox][name=group]:checked').length == 2) { 
 
    $('form[id='+MyForm+'] input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled'); 
 
    }else{ 
 
    $('form[id='+MyForm+'] input[type=checkbox][name=group]:not(:checked)').prop('disabled', false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<h4> 
 
Form 1 
 
</h4> 
 
    <form id="form_1"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div> 
 

 
<div> 
 
<h4> 
 
Form 2 
 
</h4> 
 
    <form id="form_2"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div>

Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий ниже, и я вернусь к вам как можно скорее.

Я надеюсь, что эта помощь. Счастливое кодирование!

Answer 2

Вот рабочий раствор. Надеюсь, поможет!

$('input[type=checkbox][name=group]').on('change', function(e) { 
 
    if ($('#form_1 input[type=checkbox][name=group]:checked').length === 2) { 
 
    $('#form_1 input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled'); 
 
    }else{ 
 
    $('#form_1 input[type=checkbox][name=group]:not(:checked)').prop('disabled', false); 
 
    } 
 
    if ($('#form_2 input[type=checkbox][name=group]:checked').length === 2) { 
 
    $('#form_2 input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled'); 
 
    }else{ 
 
    $('#form_2 input[type=checkbox][name=group]:not(:checked)').prop('disabled', false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div> 
 
<h4> 
 
Form 1 
 
</h4> 
 
    <form id="form_1"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div> 
 

 
<div> 
 
<h4> 
 
Form 2 
 
</h4> 
 
    <form id="form_2"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div>

Answer 3

Используйте функцию для инициализации обработчика событий для каждой группы. Также используйте другое имя группы.

https://jsfiddle.net/3zbs61q5/3/

function setupCheckboxGroup(grpName){ 
 

 
$('input[type=checkbox][name='+grpName+']').on('change', function(e) { 
 
    if ($('input[type=checkbox][name='+grpName+']:checked').length < 2) { 
 
    $('input[type=checkbox][name='+grpName+']:not(:checked)').prop('disabled', false); 
 
    } 
 
    if ($('input[type=checkbox][name='+grpName+']:checked').length == 2) { 
 
    $('input[type=checkbox][name='+grpName+']:not(:checked)').prop('disabled', 'disabled'); 
 
    } 
 
}); 
 

 
} 
 

 
setupCheckboxGroup('group'); 
 
setupCheckboxGroup('group2');

<div> 
 
<h4> 
 
Form 1 
 
</h4> 
 
    <form id="form_1"> 
 
    <input type="checkbox" name="group" value="1"> 
 
    <input type="checkbox" name="group" value="2"> 
 
    <input type="checkbox" name="group" value="3"> 
 
    </form> 
 
</div> 
 

 
<div> 
 
<h4> 
 
Form 2 
 
</h4> 
 
    <form id="form_2"> 
 
    <input type="checkbox" name="group2" value="1"> 
 
    <input type="checkbox" name="group2" value="2"> 
 
    <input type="checkbox" name="group2" value="3"> 
 
    </form> 
 
</div>