Как я могу проверить, проверен ли определенный тип ввода?

ProgramBox

Как я могу проверить, проверен ли определенный тип ввода?

Post author:admin
Запись опубликована:30 ноября, 2022
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

У меня есть две формы флажков в моем HTML-шаблоне, одна из них допускает несколько вариантов, а другая позволяет выбрать только один вариант.

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

Я не могу использовать id или name, поскольку они генерируются DB, id_something1, id_something2 и т.д. Как люди используют для решения этой проблемы?

Текущий JS

 <script>
  $('input[type=checkbox]').on('change', function (e) {
    if ($('input[type=checkbox]:checked').length > 2)) {
      $(this).prop('checked', false);
    }
  });
</script>

Форма, которую я пытаюсь ограничить 2 флажками

 <li class="list-group-item">
 <div class="custom-control custom-checkbox">
  <label>Test</label></label><input type="checkbox" name="orange" id="id_orange" checked>
 </div>
</li>

<li class="list-group-item">
 <div class="custom-control custom-checkbox">
  <label>Test2</label><input type="checkbox" name="banana" id="id_banana" checked>
 </div>
</li>

Вторая форма, которая также подвергается воздействию

 <ul id="id_someform">
 <li>
  <label for="id_someform_1"></label><input type="checkbox name="someForm" value=1" id="id_someform_1"
 </li>
 <li>
  <label for="id_someform_2"></label><input type="checkbox name="someForm" value=2" id="id_someform_2"
 </li>
</ul>

Ответ №1:

Ограничьте область действия вашего внутреннего селектора окружающей формой:

   $('input[type=checkbox]').change(function() {
    const form = $(this).closest('form');

    if ( form.find('input[type=checkbox]:checked').length > 2) ) {
      $(this).prop('checked', false);
    }
  });

Обратите внимание, что я упростил ваш синтаксис с change() помощью метода jQuery.

1. Извините, я не знаком с jQuery, должен ли я использовать .closest(‘form_id’) или это буквально ближайшая форма в HTML? Если он самый близкий, он не будет работать, поскольку у меня есть JS внизу страницы, а рассматриваемая ФОРМА находится посередине.

2. Не используйте идентификаторы в сценариях, если в этом нет необходимости. Они без необходимости ограничивают возможность повторного использования вашего кода. Здесь я ищу элемент формы, который переносит измененный ввод.

3. Не возникнет ли проблема, поскольку я использую несколько форм на этой странице?

4. Трудно сказать. То, что вы называете «формами» в своем вопросе, не является формами. Я действительно не знаю, как выглядит ваша ситуация.

Ответ №2:

 <script>
  $('input[type=checkbox]').on('change', function (e) {
    if ($('input[type=checkbox]:checked').length > 2)) {
      $(this).prop('checked', false);
    }
  });
</script>

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

 <script>
  $('input#id_orange').on('change', function (e) {
    
    if ($('input[type=checkbox]:checked').length > 2)) {
      $(this).prop('checked', false);
    }
  });
</script>

Ответ №3:

Если форма отличается, вы можете попробовать заменить следующую строку:

 $('input[type=checkbox]').on('change', function (e) {

с:

 $('#form-id input[type=checkbox]').on('change', function (e) {

или:

 $('form.class input[type=checkbox]').on('change', function (e) {

или любой другой родительский элемент, который отличается от одной формы к другой.

Например:

 $('#form-id input[type=checkbox]').on('change', function (e) {
    if ( $('#form-id input[type=checkbox]:checked').length > 2 )  {
        $(this).prop('checked', false);
    }
});

Я протестировал его, и он работает для меня.