Question

这是我的 HTML 代码。

$(function(){
   $("#next").click(function() {
      $("#subject").toggle();
      $("#email").toggle(); 
      $("#next").click(function() {

          $("#content").toggle(); 
          $("#email").toggle(); 

      })
   })

   if ($('#content') == true){
    $('#next').prop('disabled', true);
   }
});

$(function(){});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-container">

    <form method="post" id="email">
        <fieldset class="form-group">
          <label for="email"></label>
          <input type="email" class="form-control"name="email" placeholder="Enter email">
        </fieldset>
    </form>

    <form method="post" id="subject">

        <fieldset class="form-group">
          <label for="subject"></label>
          <input type="text" class="form-control"name="subject"placeholder="Subject" >
        </fieldset>
    </form>

   <form method="post" id="content">
      <fieldset class="form-group">
        <label for="content"></label>
        <textarea class="form-control" name="content" rows="3" placeholder="What would you like me to ask, Sir/Madam?"></textarea>
      </fieldset>
    </form>

    <div id="buttons">
        <button type="submit" id="next" class="btn btn-primary" class='enableOnInput' enabled='enabled'>Next</button>
        <button type="submit" id="submit" class="btn btn-primary">Submit</button>
   </div>
</div>

因此，当表单转到具有 id =“content”的表单的最后一部分时，我试图禁用“下一步按钮”。但我做不到。有人可以帮助我吗？感谢您的时间和努力。

Answer 1

检查这一点，只需在 #content.toggle() 部分下方添加一行：

$("#next").click(function() {
    
    $("#content").toggle();
    $("#email").toggle();
    $('#next').attr('disabled', true);
                
})

这是小提琴：https://jsfiddle.net/tjmcr806/

删除您的 IF 语句，因为它现在是多余的。

并且您可能希望在加载时切换 #subject 和 #content，如 Fiddle 所示。

Answer 2

$('#next').prop('disabled', true);

像这样使用attr()而不是prop()

$('#next').attr('disabled', true);

Answer 3

$('#content') 不是有效的 jQuery 选择器；您没有 ID 为 content 的元素。您需要将此 ID 添加到您的 <textarea>，然后检查 .val() 是否包含内容，而不仅仅是检查该元素是否存在。这可以从以下方面看出：

$(function() {
  $("#next").click(function() {
    $("#subject").toggle();
    $("#email").toggle();
    $("#next").click(function() {
      $("#content").toggle();
      $("#email").toggle();
    })
  })
  if ($('#content').val()) {
    $('#next').prop('disabled', true);
  }
});

$(function() {});

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

<div class="form-container">

  <form method="post" id="email">
    <fieldset class="form-group">
      <label for="email"></label>
      <input type="email" class="form-control" name="email" placeholder="Enter email">
    </fieldset>
  </form>

  <form method="post" id="subject">

    <fieldset class="form-group">
      <label for="subject"></label>
      <input type="text" class="form-control" name="subject" placeholder="Subject">
    </fieldset>
  </form>

  <form method="post" id="content">

    <fieldset class="form-group">
      <label for="content"></label>
      <textarea class="form-control" name="content" id="content" rows="3" placeholder="What would you like me to ask, Sir/Madam?"></textarea>
    </fieldset>
  </form>

  <div id="buttons">

    <button type="submit" id="next" class="btn btn-primary" class='enableOnInput' enabled='enabled'>Next</button>
    <button type="submit" id="submit" class="btn btn-primary">Submit</button>

  </div>

如何禁用切换按钮？

3 个答案: