Question

我有一个包含3个输入（2个文本和一个下拉选择）的搜索表单，并且我制作了一个jQuery预验证代码，该代码禁用了Submit按钮，除非在这些输入上键入了某些内容。代码如下：

// 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 /桌面上完美运行。然后，我想对移动设备的页面进行个性化设置，因此我在Bootstrap 4类中添加了与这3个输入完全相同的表单-仅当用户在移动设备上时才显示div。

该代码在移动设备上正在响应，它在前两个输入（文本输入）上完成其工作，但是下拉选择并没有解决问题。即使我从列表中选择了某些内容，该按钮仍处于禁用状态。

两个版本（台式机和移动版）的下拉代码均如下所示：

d-block d-sm-none

有什么想法吗？谢谢！

Answer 1

您需要使用class而不是id来选择下拉列表：

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

禁用/启用提交按钮不适用于移动课程

1 个答案: