CODEWITHSUNDEEP
javascripthtml
Bendystraw
Bendystraw

Reputation: 45

JavaScript "button.disabled = boolean" not working correctly

To simplify, this code runs as part of an async function that loads in content based on an api response.

Based on whether or not the api returns a "next page token" (for basic prev/next page pagination purposes) it adds a data-prevpage or data-nextpage attribute to the button with the proper value returned by the api. Such that this 

<button class='btn'>Click</button>

will become 

<button class='btn' data-nextpage="something">Click</button>

After it adds (or doesn't add the data attribute, depending on if the api returned such information) the last piece of the function should enable/disable the button if it has/doesn't have the data attribute.

The issue is, this code works - almost. Instead of adding the attribute disabled, it adds the attribute disabled="" to the button. Meaning it looks like this: 

<button class='btn' data-nextpage="something" disabled="">Click</button>

instead of 

<button class='btn' data-nextpage="something" disabled>Click</button>

I've read through several links here regarding disabling not working but they deal with other languages, Xamarin, or people putting the boolean values in as strings. Can anyone explain why this code isn't setting disabled as true or false (present in html or not) but as disabled="", or if I missed a page pertaining to my question, a link to it?

Once again, as I said, this code works but inserts the wrong thing into the html element and the question of why is what I'm here for. Thanks for any responses!

    //Function does other api stuff here


    // Store prev page token/next page token in a data attribute in respective button
    if (data.prevPageToken !== undefined) {
      this.prevBtn.setAttribute('data-prevpage', data.prevPageToken);
    }
    if (data.nextPageToken !== undefined) {
      this.nextBtn.setAttribute('data-nextpage', data.nextPageToken);
    }

    // if prev button has attribute, set disabled to false. Otherwise, the button is disabled
    if (this.prevBtn.hasAttribute('data-prevpage')) {

    // console.log(this.prevBtn.hasAttribute('data-prevpage')) returns false on first call, ideally making button disabled and unclickable

      this.prevBtn.disabled = false;
    } else {
      this.prevBtn.disabled = true;
    }

    // if next button has attribute, set disabled to false. Otherwise, the button is disabled
    if (this.nextBtn.hasAttribute('data-nextpage')) {

// console.log(this.nextBtn.hasAttribute('data-prevpage')) returns true on first call, ideally making disable=false and button clickable

      this.nextBtn.disabled = false;
    } else {
      this.nextBtn.disabled = true;
    }

Upvotes: 2

Views: 965

Answers (1)

Glenn Ferrie
Glenn Ferrie

Reputation: 10408

If you want to use vanilla javascript, then you should use these functions: 

element.setAttribute("disabled", "disabled");
// this will disable an html element.

element.removeAttribute("disabled");
// this will remove the disabled attribute, and re-enable the control.

If you are willing to use jQuery then you can use boolean expressions for disabled

$("element").prop("disabled", true);
$("element").prop("disabled", false);

Hope this helps you out...

Upvotes: 1

Related Questions