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

Question

编辑： 非常感谢你的帮助！我还需要定位我的模态所在的 div，如下所示：

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

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

---

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

这里是 HTML 和函数。

包含打开表单的链接的 div 称为“#message”。

提前致谢

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

检查下面的 sn-p，您的错误在于 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>