Disable/Enable 提交按钮在移动设备上不起作用 类

Question

我有一个包含 3 个输入的搜索表单（2 个文本和一个下拉菜单 select），并且我制作了一个 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);
  }
 });
});

代码在 web/desktop 上完美运行。然后，我想为移动设备个性化页面，所以我将与这 3 个输入完全相同的表单添加到 d-block d-sm-none Bootstrap 4 class - div仅当用户使用移动设备时才会显示。

代码在移动设备上响应，它在前两个输入（文本输入）上完成工作，但下拉菜单 select 没有起作用。即使我 select 列表中的某些内容，该按钮仍处于禁用状态。

两个版本（桌面版和移动版）的下拉代码如下所示：

<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>

有什么想法吗？谢谢！

Answer 1

您需要使用 class 而不是 id 到 select 下拉列表：

$(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

中的第一个 Select