jquery prop.(“disabled”,true) not working, niether is .removeAttr('disabled');

Question

For some reason, when i would try to re-enable a button by running:

$("#reloadSuggestions").removeAttr('disabled');

and i also tried:

$("#reloadSuggestions").prop('disabled', false);

Anything i tried would not remove the disabled property, it would leave it blank. In the console if i ran $("#reloadSuggestions").removeAttr('disabled'); it would remove it, but not when my actual code was running

PS reopeing this to answer it since it was closed as off-topic and nobody gave a real solution.

When the user clicks the button the button is disabled:

  <div style="overflow: hidden;">
      <p class="mb-1 pull-left mt-5">Select up to ten audiences</p>
       <button class="btn-text mt-5 mb-1 pull-right" id="reloadSuggestions"><i class="far fa-sync-alt"></i></button>
  </div>



$("#reloadSuggestions").click(function(e) {

    fetchSuggestedTargeting();
    $("#reloadSuggestions").prop("disabled", true);
});

If the user did not fill in an input, i enable the button again:

function fetchSuggestedTargeting() {

    // set array of keywords
    var tagsinputKeywords = $("#interestTagInput").tagsinput('items')

    // Make sure user entered keywords
    if (tagsinputKeywords.length < 1) {

        $("#reloadSuggestions").prop('disabled', false);
        $("#searchSuggestedInterest").prop('disabled', false);;

        swal({
            title: "oops!",
            text: "Please enter atleast 1 keyword that describes your product.",
            imageUrl: "/alert-icon.png"
        });

        return;
    }
}

here is an example of the issue

EDIT:

To clarify for the power tripping mods of SO, i am trying to re-enable a button after its been clicked and used to fetch data asynchronously, once the data is fetched, i want to re-enable the button for the user to be able to click it again.

When trying to set the disabled attribute back to false by running $("#reloadSuggestions").prop('disabled', false); NOTHING happens.

Not sure how this is a duplicate of someone asking how to change the property, the issue here is that the property won't change, regardless of what code is being ran unless i wrap it in a timeout.

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195089/discussion-between-ricks-and-kevin-b). — ricks, Jun 17 '19 at 23:26

ricks · Answer 1 · 2019-06-17T23:01:28.727

-2

Figured out that if i wrapped the code in a timeout:

setTimeout(function () {

   $("#reloadSuggestions").prop('disabled', false);
}, 0);

My code would work, i thought of this solution because i was reading this question to solve a similar issue

When you set a timeout, it actually queues the asynchronous code until the engine executes the current call stack.

Hope this helps anyone else who has this annoying issue.

Since apparently bugs don't exist, here is an example of the issue

edited Jun 17 '19 at 23:01

answered Jun 17 '19 at 19:54

ricks

3,154
31
51

@PatrickEvans code is being ran on a click listener, element was already loaded and was disabled upon clicking to fetch data, then when the data is fetched the button is suppose to be enabled. – ricks Jun 17 '19 at 22:42

jquery prop.(“disabled”,true) not working, niether is .removeAttr('disabled');

1 Answers1