change opacity of submit button when all required field validated

[combaudouo]

Hi, I am pretty new (and not very good basically) to Tailwind and i am trying to find a way to change the opacity of the submit button of a form depending whether all required fields in the form are filled or not.

I have an input field which is required:
<input type="radio" name="cordee" id="{{ $cordee->id }}" class="hidden" required>

And I have a submit button with disabled:opacity-50:
<button type="submit" form="select_cordee" class="flex-none px-4 bg-indigo-500 disabled:opacity-50 rounded-lg text-white hover:bg-indigo-400">{{ __('ascent.start') }}</button>

But it does not work. I have tried to do something with a custom variant but as i said, I am not very good, so I don't really find my way. Is there a easier solution ?

Thanks

[crswll]

Since opacity doesn't have disabled in it's list of variants by default you need to extend it to include it.

// tailwind.config.js
{
  ...
  variants: {
    extend: {
      opacity: ['disabled']
    },
  },
}

[combaudouo]

Thank you for your answer. I already extended it actually (and it works, when I disable manually the submit button, it appears at half opacity