How do I disable the toggle button?

user_15514895 0
Viewed 307

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.

html jquery javascript
3 Answers

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.

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

use attr() not prop(), like this

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

$('#content') is not a valid jQuery selector; you have no element with the ID of content. You'll want to add this ID to your <textarea>, and then check that the .val() has content, rather than just checking whether the element exists or not. This can be seen in the following:

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

user_23416030
Related