Кнопка «Отключить / Включить» не работает на мобильных классах - PullRequest
Новая
       15

Кнопка «Отключить / Включить» не работает на мобильных классах

2 голосов
/ 18 июня 2019

У меня есть поисковая форма с 3 входами (2 текста и один выпадающий список), и я сделал код предварительной проверки jQuery, который отключает кнопку отправки, если что-то не введено на этих входах.Код выглядит следующим образом: 

// Search button is disabled until something is typed.
$(document).ready(function () {
 $('input[type="submit"]').prop('disabled', true);
 $('input[type="text"]').keyup(function () {
   if ($(this).val() != '') {
      $(':input[type="submit"]').prop('disabled', false);
   } else {
      $(':input[type="submit"]').prop('disabled', true);
   }
});
 $('#dropdown').on("change", function () {
   if ($(this).val() == '') {
      $(':input[type="submit"]').prop('disabled', true);
  } else {
      $(':input[type="submit"]').prop('disabled', false);
  }
 });
});

Код отлично работает в Интернете / на рабочем столе.Затем я хотел персонализировать страницу для мобильных устройств, поэтому я добавил точно такую ​​же форму с этими 3 входами в класс d-block d-sm-none Bootstrap 4 - div будет отображаться только тогда, когда пользователь находится на мобильном телефоне.

Код отвечает в то время как на мобильном телефоне, он выполняет свою работу на первых двух входах (текстовых), но выпадающий выбор не работает.Даже если я выберу что-то из списка, кнопка все равно будет отключена.

Выпадающий код выглядит так в обеих версиях (для настольных и мобильных устройств): 

<select class="custom-select" name="status" id="dropdown">
<option selected="selected" value="">Find by status</option>
@foreach($status as $sts)
<option value="{{$sts->id}}">{{$sts->name}}</option>
@endforeach
</select>

Есть идеи?Спасибо!

1 Ответ

3 голосов
/ 18 июня 2019

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

$(document).ready(function () {
 $('input[type="submit"]').prop('disabled', true);
 $('input[type="text"]').keyup(function () {
   if ($(this).val() != '') {
      $(':input[type="submit"]').prop('disabled', false);
   } else {
      $(':input[type="submit"]').prop('disabled', true);
   }
});
 $('.custom-select').on("change", function () {
   if ($(this).val() == '') {
      $(':input[type="submit"]').prop('disabled', true);
  } else {
      $(':input[type="submit"]').prop('disabled', false);
  }
 });
});

Когда вы используете $('#dropdown'), ваш код будет применяться только при первом выборе в DOM

...