Highlighted

Is it possible to disable a buton of btn-group-justified?

Contributor ,
Aug 03, 2018

Copy link to clipboard

Copied

Hi,

this is my  btn-group-justified:

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">

<a onClick="DisabeButton(); " href="#" style="background: #E39C9D" class="btn btn-default" role="button" id="MyBtnOne">Button 1</a>

<a href="#" style="background: #E39C9D"  class="btn btn-default" role="button" id="MyBtnTwo">Button 2</a>

</div>

This doesn't work:

function DisabeButton() {

            document.getElementById("MyBtnTwo").disabled = true;

        } 

</script>   

Any help?

Thanks.

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

You are not using buttons, but anchor tags. Anchor tags do not have a disabled attribute.

Change the anchor to a button and you can apply the disabled attribute.

Views

343

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Is it possible to disable a buton of btn-group-justified?

Contributor ,
Aug 03, 2018

Copy link to clipboard

Copied

Hi,

this is my  btn-group-justified:

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">

<a onClick="DisabeButton(); " href="#" style="background: #E39C9D" class="btn btn-default" role="button" id="MyBtnOne">Button 1</a>

<a href="#" style="background: #E39C9D"  class="btn btn-default" role="button" id="MyBtnTwo">Button 2</a>

</div>

This doesn't work:

function DisabeButton() {

            document.getElementById("MyBtnTwo").disabled = true;

        } 

</script>   

Any help?

Thanks.

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

You are not using buttons, but anchor tags. Anchor tags do not have a disabled attribute.

Change the anchor to a button and you can apply the disabled attribute.

Views

344

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 03, 2018 0
LEGEND ,
Aug 03, 2018

Copy link to clipboard

Copied

Disable an 'anchor' tag:

<script>

function DisabeButton() {

const disableLink = document.querySelector("#MyBtnTwo");

disableLink.setAttribute("style", "color: grey; background-color: #d9d9d9;");

disableLink.setAttribute('href', "#");

return false;

}

</script>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2018 0
Adobe Community Professional ,
Aug 03, 2018

Copy link to clipboard

Copied

You are not using buttons, but anchor tags. Anchor tags do not have a disabled attribute.

Change the anchor to a button and you can apply the disabled attribute.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2018 0
Adobe Community Professional ,
Aug 03, 2018

Copy link to clipboard

Copied

To add to my previous reply, have a look at How to Disable Links | CSS-Tricks


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2018 0
LEGEND ,
Aug 03, 2018

Copy link to clipboard

Copied

BenPleysier  wrote

To add to my previous reply, have a look at How to Disable Links | CSS-Tricks

Just another persons opinion, neither are they right or wrong. There may well be a reason to disable a link based on some kind of questions and answers - anyone that says its incorrect is in denial, but hey so many in this business are self-focused idiots who'll gladly reverse their tiny minded thoughts, when, if and as soon as the boot fits.

I have no idea why the OP wants to disable a 'link' as the link at the moment appear to be going nowhere, yet strangely mentioned 'button' in the post, which are currently nowhere to be seen.

Edited.

I cant think of a valid reason for actually 'disabling' any html element to be honest. If its not an itegral part of the user experience then set its attributes to display: none; on an event.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2018 0
Adobe Community Professional ,
Aug 03, 2018

Copy link to clipboard

Copied

The effect that the applied JS has on the second anchor element, instead of

<a href="#" style="background: #E39C9D"  class="btn btn-default" role="button" id="MyBtnTwo">Button 2</a>

we now have

<a href="#" style="color: grey; background-color: #d9d9d9;" class="btn btn-default" role="button" id="MyBtnTwo">Button 2</a>

  • The anchor element has not been disabled.
  • The hand cursor still appears.
  • What screen readers will make of this.

Fortunately, there are other opinions.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2018 0
Adobe Community Professional ,
Aug 03, 2018

Copy link to clipboard

Copied

osgood_  wrote

I cant think of a valid reason for actually 'disabling' any html element to be honest. If its not an itegral part of the user experience then set its attributes to display: none; on an event.

I use 'disabled' quite often, one case in mind is my Mailing module where certain actions can no longer be performed once the email has been sent, namely Edit, Send and Delete, while Preview remains enabled


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2018 0
LEGEND ,
Aug 03, 2018

Copy link to clipboard

Copied

Yes of course it can be done and is used regularly but you may just as well remove the buttons if they become disfunctional as they serve no purpose plus the user is in no doubt the option is no longer available rather than just greyed out in which case the user will still probably attempt to click on the buttons and may even think they are faulty not just temporarily unavailable.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2018 0
Contributor ,
Aug 03, 2018

Copy link to clipboard

Copied

Thank you both Ben and Osgod

in effect the script of Osgod  doesn't work with the class="btn-group btn-group-justified".

One of the problem with responsive page is to find the right layout, for this reason I used the justified btn group.

So, as Benpleysier suggest  i will use the usual button (in this case I know how to disable).

The reason I need to disable is because i need to guide the user between several choises that can be sometime abled and sometime not.

Thank you both again.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2018 0
osgood_ LATEST
LEGEND ,
Aug 03, 2018

Copy link to clipboard

Copied

If the script that l provided doesnt work then that is something that  Bootstrap is adding causing it to fail. I tested the script without Bootstrap and it works perfectly. I cant see a reason for it not to work with Bootstrap but then again that junky framework injects all kinds of bilge......should be avoided in my opinion, at all costs.

But ultimately if links hrefs were never intended then use buttons, its a much better workflow.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2018 0