How do I disable the toggle button?

Question

This is my HTML Code.

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

So, I was trying to disable the "Next Button" when the form goes to the last part of the form which has id = "content". But I couldn't do it. Would anyone be able to help me? Appreciate your time and effort.

Answer 1

Check this, just add one line below your #content.toggle() section:

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

Here's the Fiddle: https://jsfiddle.net/tjmcr806/

Delete your IF statement as it is now redundant.

And you probably want to toggle #subject and #content on load as shown in Fiddle.