时间戳

首页 > 解决方案 > 使用 jQuery（和引导程序）启用/禁用提交按钮

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

问题描述

不幸的是，我有一些字段不适合<form>标签。我希望在加载时禁用表单，直到用户至少在多个字段上输入，然后该按钮将启用。

现在我有2个问题。其中之一是，对于有效的 jquery 代码，它只能在函数的一个字段上工作。如果我想要多个字段作为一个函数怎么办.....有没有办法做到这一点？另一个问题是对于熟悉 Bootstrap 4 的人来说，“禁用”功能似乎存在问题。即使我把它disabled放在一个button或a类里面，它仍然是可点击的。即使我尝试按照文档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);
            }
});

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

标签： javascriptjquerynode.jsbootstrap-4electron

解决方案

如果我理解您想要正确执行的操作，我相信您的代码可以正常工作，您需要做的就是在按钮 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/

推荐阅读