How to Disable a button?

[brad]

I would assume that marking a button to ‘disabled’ that it would disable the button? Or does it just change the styling?

I have several buttons that I have marked as disabled in the app connect settings but still work?

How would I disable a button?

[Teodor]

You need to add the disabled attribute to your button. Using just the Bootstrap disabled class only styles the button differently.

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled

[brad]

That is for form fields. I just want to disable the button. No way to do that in the UI?

[Teodor]

@brad

That is for form fields

Not sure what do you mean Brad.
Just add the disabled attribute to your button in order to disable it!
The options you use in App Connect panel for Bootstrap styling are only applying Bootstrap classes to your element.

[brad]

So what is this button missing to disable it? Disable it from submitting the form or opening a modal?

<button id="btnAddComment" class="btn btn-block btn-success disabled btn-sm"><i class="fad fa-comment-alt-check"></i>&nbsp; Add Comment</button>

[Teodor]

It’s missing the disabled attribute.

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled

[brad]

It is there …

[Teodor]

Brad, this is a CSS class, not an HTML attribute. You need to add the attribute, as the class won’t disable your button. CSS is used to style elements, not to change the way they function.

[brad]

Alright, I understand that the ‘disabled’ check box in the UI is only CSS then. But there doesn’t seem to be any way to add the disabled attribute to the button in the UI.

I tried the Dynamic Attributes …

But it asks for a value?

[sitestreet]

Leave the value empty and it will be disabled. Or put in a condition to disable it when the condition is met.

[Teodor]

This is a dynamic attribute. You can add a dynamic expression there which when true will disable it…

dmx-bind:disabled="my_value == 1234"

You just need to add the disabled attribute to the button!
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_disabled

Are you sure you don’t need a refreshing course about HTML fundamentals ?

[brad]

@Teodor

Are you sure you don’t need a refreshing course about HTML fundamentals ?

Perhaps. Or a few of these lol

But my button does have the 'disabled' attribute in it just like your link. I think I will just comment out my button completely for now.

[Teodor]

@brad

But my button does have the ‘disabled’ attribute in it just like your link.

Your button only has a class called disabled not an attribute... Ot at least I don't see it in the code you posted.

[brad]

OMG … I feel stupid now.

I didn’t notice that it was within the class tag. I just looked for ‘disabled’ and saw it there.

Thank you. lol

[revjrblack]

Maybe too many ?

[Teodor]

Happens sometimes!

And just to add to the topic, generic HTML attributes can be set in the DOM panel, that’s its idea:

[mamdi122003]

I am looking for help in this one. I have been trying to disable a button when (preferenceform.bs5formgroup.value.count() == 5) it is not working.

I also tried (bs5formgroup.value.count() == 5) no luck.

here is the checkbox input:

                            <div class="col">
                                <div class="form-group mb-3 mt-2 mb-2 ms-2 me-2" dmx-bind:value="id_preference" is="dmx-checkbox-group">

                                    <div class="form-check radiowrap" dmx-repeat:repeat1="preferencelistQuery.data.queryPreference.top(countpreference.value)">
                                        <input class="form-check-input" type="checkbox" id="idpreference" name="preferenceName[]" dmx-bind:value="id_preference">
                                        <label class="form-check-label" for="idpreference">{{name}}</label>
                                    </div>
                                </div>
                            </div>
                        </div>

I don't know why it is not working.