Why won't $(".unhide-btn").prop("disabled", false) work?

June 26, 2022

When i press the hide button it is also supposed set disabled to false to the unhide button but it does nothing but hide the element.

    $(document).ready(function() {
      $(".unhide-btn").prop("disabled", true)
      $("button").click(function() {
        $("p").hide()
        $(".unhide-btn").prop("disabled", false)
        $("button").prop("disabled", true)
      })
      $(".unhide-btn").click(function() {
        $("p").show()
        $(".unhide-btn").prop("disabled", true)
        $("button").prop("disabled", false)
      })
    })

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <body>
  <script src="script.js"></script>
  <p>Hide me!</p>
  <button>Hide</button>
  <button class="unhide-btn">Unhide</button>
</body>

>Solution :

As I mentioned in my comment, your click event on the button applies to all your buttons, which is causing the issue. The simple fix would instead be to add a class to your hide button (like you have for your unhide button) and select that:

$(document).ready(function() {
  $(".unhide-btn").prop("disabled", true)
  $(".hide-btn").click(function() {
    $("p").hide()
    $(".unhide-btn").prop("disabled", false)
    $(".hide-btn").prop("disabled", true)
  })
  $(".unhide-btn").click(function() {
    $("p").show()
    $(".unhide-btn").prop("disabled", true)
    $(".hide-btn").prop("disabled", false)
  })
})

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

<p>Hide me!</p>
<button class="hide-btn">Hide</button>
<button class="unhide-btn">Unhide</button>