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

[Jhon_Carlo]

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.

[osgood_]

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>

[BenPleysier · Accepted solution]

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.

[BenPleysier]

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

[osgood_]

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.

[BenPleysier]

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.

[BenPleysier]

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

[osgood_]

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.

[Jhon_Carlo]

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.

[osgood_]

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.