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

检查以下代码段，您的错误是使用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>

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

2 个答案: