删除jquery中禁用的提交按钮属性

Question

编辑：非常感谢你的帮助！我还需要针对我的模态所在的div：

$('#message').on('input', '#createPostTitle, #createPostDescription, #createPostPrice', function(){ if($('#createPostTitle').val() != '' && $('#createPostDescription').val()!='' && $('#createPostPrice').val()!='') { $('#createPostSubmitButton').removeAttr("disabled"); }

把它留在这里，以防有人遇到同样的问题！

---

我找到了一些解决问题的方法，但没有一个对我有效。提前为裁员道歉。我已经创建了一个通过标题中的链接触发的模式。打开后，模态会显示一个禁用按钮，在填充前三个字段后，该按钮应该可以访问。我只是试图在字段完成后删除该属性，但它根本不起作用。

这是HTML和函数。

包含打开表单的链接的div称为"#消息"；。

提前感谢

$('#createPostTitle','#createPostDescription','#createPostPrice').on("input", function(){
if($('#createPostTitle').val() != '' && $('#createPostDescription').val()!='' && $('#createPostPrice').val()!='') {
$('#createPostSubmitButton').removeAttr("disabled");
} 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal" id="createPostModal" aria-hidden="true">  
<form class="newPostForm">  
<div class="card" style="width: 35rem;">
<div class="card-body">
<h5 id="titleAlert">Create New Post</h5>
<div class="mb-3">
<label for="createPostTitle">Title</label>
<input type="text" class="form-control" placeholder="required" id="createPostTitle" required>
</div>
<div class="mb-3">
<label for="createPostDescription">Description</label>
<textarea type="text" class="form-control" placeholder="required" id="createPostDescription" required></textarea>
</div>
<div class="mb-3">
<label for="createPostPrice">Price</label>
<input type="text" class="form-control" placeholder="required" id="createPostPrice" required>
</div>
<div class="mb-3">
<label for="createPostLocation">Location</label>
<input type="text" class="form-control" placeholder="optional" id="createPostLocation">
</div>
<div class="mb-3">
<label for="createPostWillDeliver">Will Deliver</label>
<input type="checkbox" class="form-control" id="createPostWillDeliver">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-lg btn-primary" id="createPostSubmitButton" disabled>Submit</button>
</div>
</div>
</div>
</form>
</div>

Answer 1

检查下面的代码片段，您的错误是使用jQuery选择器。所以不是：

$('#createPostTitle','#createPostDescription','#createPostPrice')

你需要写

$('#createPostTitle, #createPostDescription, #createPostPrice')

$('#createPostTitle, #createPostDescription, #createPostPrice').on("input", function() {
if ($('#createPostTitle').val() != '' && $('#createPostDescription').val() != '' && $('#createPostPrice').val() != '') {
$('#createPostSubmitButton').removeAttr("disabled");
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="newPostForm">
<div class="card" style="width: 35rem;">
<div class="card-body">
<h5 id="titleAlert">Create New Post</h5>
<div class="mb-3">
<label for="createPostTitle">Title</label>
<input type="text" class="form-control" placeholder="required" id="createPostTitle" required>
</div>
<div class="mb-3">
<label for="createPostDescription">Description</label>
<textarea type="text" class="form-control" placeholder="required" id="createPostDescription" required></textarea>
</div>
<div class="mb-3">
<label for="createPostPrice">Price</label>
<input type="text" class="form-control" placeholder="required" id="createPostPrice" required>
</div>
<div class="mb-3">
<label for="createPostLocation">Location</label>
<input type="text" class="form-control" placeholder="optional" id="createPostLocation">
</div>
<div class="mb-3">
<label for="createPostWillDeliver">Will Deliver</label>
<input type="checkbox" class="form-control" id="createPostWillDeliver">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-lg btn-primary" id="createPostSubmitButton" disabled>Submit</button>
</div>
</div>
</div>
</form>

Answer 2

您的on.("input")选择器不正确。不要使用单独的字符串，而是使用逗号分隔的字符串。

$('#createPostTitle, #createPostDescription, #createPostPrice').on("input", function(){
if($('#createPostTitle').val() != '' && $('#createPostDescription').val()!='' && $('#createPostPrice').val()!='') {
$('#createPostSubmitButton').removeAttr("disabled");
} 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal" id="createPostModal" aria-hidden="true">  
<form class="newPostForm">  
<div class="card" style="width: 35rem;">
<div class="card-body">
<h5 id="titleAlert">Create New Post</h5>
<div class="mb-3">
<label for="createPostTitle">Title</label>
<input type="text" class="form-control" placeholder="required" id="createPostTitle" required>
</div>
<div class="mb-3">
<label for="createPostDescription">Description</label>
<textarea type="text" class="form-control" placeholder="required" id="createPostDescription" required></textarea>
</div>
<div class="mb-3">
<label for="createPostPrice">Price</label>
<input type="text" class="form-control" placeholder="required" id="createPostPrice" required>
</div>
<div class="mb-3">
<label for="createPostLocation">Location</label>
<input type="text" class="form-control" placeholder="optional" id="createPostLocation">
</div>
<div class="mb-3">
<label for="createPostWillDeliver">Will Deliver</label>
<input type="checkbox" class="form-control" id="createPostWillDeliver">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-lg btn-primary" id="createPostSubmitButton" disabled>Submit</button>
</div>
</div>
</div>
</form>
</div>