使用 jQuery（和引导程序）启用/禁用提交按钮

Question

很遗憾，我有一些字段不适合 <form> 标记。我希望在加载时禁用表单，直到用户至少在多个字段上输入，然后按钮才会启用。

现在我有两个问题。其中之一是，对于有效的 jquery 代码，它只能在函数的一个字段上工作。如果我想要多个字段作为一个函数怎么办.....有没有办法做到这一点？另一个问题是对于熟悉 Bootstrap 4 的人来说，“禁用”功能似乎存在问题。即使我将disabled 放入button 或a 类中，它仍然是可点击的。即使我尝试按照documentation 中的建议添加tabindex="-1"，但无济于事。

这是 HTML（因为杂乱，不想在其中使用引导程序）：

<p>User ID</p>
<input class="form-control" id="UserIDField" aria-label="Username" aria-describedby="basic-addon1" style="width: 146px;" type="text" required>
<p>Message</p>
<textarea class="form-control" id="MessageField" rows="5" data-toggle="tooltip" data-placement="top" data-trigger="manual" title="Message is required!" required></textarea>
<p>Select date</p>
<input id="DatePicker" type="text" placeholder="Click to select" class="form-control" aria-describedby="basic-addon3" aria-label="Date" data-zdp_readonly_element="false" style="position: relative; float: none; top: auto; right: auto; bottom: auto; left: auto; margin: 0px; padding-right: 40px;" required>
<button type="button" id="ScheduleButton" tabindex="-1" class="btn btn-primary btn-lg btn-block disabled" data-toggle="tooltip" aria-disabled="true" data-placement="top" data-trigger="manual" title="Your message is sent!"><i class="fas fa-inbox"></i> Schedule to Send Message</button>

（注意按钮idScheduleButton是提交表单的按钮）

这是 render.js 文件中的 javascript/jquery。

 $('#MessageField').on('input change', function () {
            if ($(this).val() != '') {
                $('#ScheduleButton').removeClass('disabled');
                $('#ModalButton').removeClass('disabled');
                $('#ScheduleButton').prop('disabled', false);
                $('#ModalButton').prop('disabled', false);
            }
            else {
                $('#ScheduleButton').prop('disabled', true);
                $('#ModalButton').prop('disabled', true);
            }
});

我不能像在 Electron 中那样使用 document.SOMETHING（除非我在 HTML 文件中添加它。

Answer 1

如果我理解您想要正确执行的操作，我相信您的代码可以正常工作，您只需在按钮 div 中添加 disabled 属性，以便页面加载时按钮禁用。然后当用户键入 val 更改并删除 disabled 属性时

<button type="button" id="ScheduleButton" tabindex="-1" 
class="btn btn-primary btn-lg btn-block disabled" 
data-toggle="tooltip" aria-disabled="true" data-placement="top" 
data-trigger="manual" title="Your message is sent!" 
disabled>
      <i class="fas fa-inbox"></i> Schedule to Send Message
</button>

这是一个工作示例 https://jsfiddle.net/70m6kqud/

Answer 2

input 和 change 事件将冒泡。这意味着围绕两个输入的父元素可以捕获这些事件。我不知道你对一些不幸地不适合标签的字段是什么意思，在这个例子中我仍然使用了一个。

下面的示例将监听表单元素上的input 事件。每当其中一个输入的值发生更改时，它都会检查所有字段是否具有有效（在这种情况下；非空）值。

当任一字段的输入为空时，它会将areFieldsValid 布尔值设置为false，这意味着该字段无效。然后，此值用于设置或删除表单中按钮的 disabled 属性。

编辑

使用正确的选择器，您可以指定要检查哪些输入要省略。

const $form = $('.form');
const $inputs = $form.find('input.validate');
const $button = $form.find('button');

$form.on('input', '.validate', function(event) {
  let areFieldsValid = true;
    
  $.each($inputs, function() {
    const $input = $(this);
    if ($input.val() === '') {
      areFieldsValid = false;
    }
  });
  
  $button.prop('disabled', !areFieldsValid);
});

.form {
  display: flex;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form">
  <label for="first-name">First name (validate)</label>
  <input id="first-name" class="validate" type="text" name="first_name">
  <label for="last-name">Last name</label>
  <input id="last-name" type="text" name="last_name">
  <label for="address">Address</label>
  <input id="address" type="text" name="address">
  <label for="country">Country (validate)</label>
  <input id="country" class="validate" type="text" name="country">
  <button type="submit" disabled>Submit</button>
</form>

编辑

下面的这个 sn-p 可以与您想要的 id 选择器一起使用。

const $form = $('.your-form');
const $inputs = $form.find('#UserIDField, #MessageField, #DatePicker');
const $buttons = $form.find('#ScheduleButton, #ModalButton');

$form.on('input', function() {
  let areFieldsValid = true;

  $.each($inputs, function() {
    const $input = $(this);
    if ($input.val() === '') {
      areFieldsValid = false;
    }
  });

  $buttons.prop('disabled', !areFieldsValid);
});

.form {
  display: flex;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="your-form">
  <input class="form-control validate" id="UserIDField" data-formPage="Main" aria-label="Username" aria-describedby="basic-addon1" type="text" placeholder="User ID Field" required>

  <textarea class="form-control validate" placeholder="Message Field" id="MessageField" data-formPage="Main" rows="5" data-toggle="tooltip" data-placement="top" data-trigger="manual" title="Message is required!" required></textarea>


  <input id="DatePicker" type="text" placeholder="Date Picker Field" data-formPage="Main" class="form-control" aria-describedby="basic-addon3" aria-label="Date" data-zdp_readonly_element="false" style="position: relative; float: none; top: auto; right: auto; bottom: auto; left: auto; margin: 0px; padding-right: 40px;"
    required>

  <button type="button" id="ScheduleButton" tabindex="-1" class="btn btn-primary btn-lg btn-block disabled" data-toggle="tooltip" aria-disabled="true" data-placement="top" data-trigger="manual" title="Your message is sent to be scheduled!" disabled>That Button should enable when fields are filled</button>
</form>