Level 1
Just use the same code you are using for disabeling the button just inside the styles attribute and the actual class names in the other condition. Or am I missunderstanding you?
Dec 4, 2023
6
Level 3
How can we change submit button styles if disabled or if not disabled?
Hello,
<button class="inline-flex items-center px-6 py-2 bg-gray-300 border border-transparent rounded-md font-bold text-gray-400 tracking-widest"
type="submit" {{ (!is_null($picture) && !empty($picture)) ? ' ' : 'disabled' }}>
Save
</button>
This code give me a button with grayed background and what I want to achieve is to give blue background when submit button is enabled. I check if picture variable is not null and not empty to disable submit button or enable it. That works well but I want to change background color and others styles when the submit button is active (that's to say when $picture variable is not null and not empty). Should I use conditional Alpine JS class :class and if so, how to do it?
Level 3
@Bogey Sorry I do not understand what you said
Level 1
<button class="inline-flex items-center px-6 py-2 {{ (!is_null($picture) && !empty($picture)) ? 'bg-blue-300 text-green-400' : 'bg-gray-300 text-gray-400' }} border border-transparent rounded-md font-bold tracking-widest"
type="submit" {{ (!is_null($picture) && !empty($picture)) ? ' ' : 'disabled' }}>
Save
</button>
Level 3
Level 122
You can use the disabled css prefix
https://tailwindcss.com/docs/hover-focus-and-other-states#disabled
<button class="inline-flex items-center px-6 py-2 bg-blue-500 disabled:bg-gray-300 border border-transparent rounded-md font-bold text-gray-400 tracking-widest"
Level 3
@Snapey Thank you for this simple solution
Please or to participate in this conversation.