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

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

У меня есть 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>
0
likwidmonster 13 Янв 2017 в 05:02

3 ответа

Лучший ответ

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

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

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>

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

Я надеюсь, что это поможет. Удачного кодирования!

2
NewToJS 13 Янв 2017 в 02:37

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

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>
1
Jamal 13 Янв 2017 в 03:29

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

$('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>
2
HenryDev 13 Янв 2017 в 02:18