Tengo dos menús desplegables seleccionados en los que el segundo menú desplegable está controlado por el primero. Va por esto:

Primer menú desplegable:

 <x-forms.select id="trees" label="Tree" wire:model.defer="tree" required> <x-slot name="option"> @foreach($trees as $item) <option value="{{$item->id}}">{{ __(strtoupper($item->name))}}</option> @endforeach </x-slot> </x-forms.select>

Segundo menú desplegable

 <x-forms.select id="fruits" label="Fruits" wire:model="fruit> </x-forms.select>

El x-forms.select es de activos/componentes

 <div class="@error($attributes->wire('model')->value()) has-error @enderror "> <div @isset($label) class="form-group" @endisset wire:ignore> @isset($label) <label class="control-label ">{{ $label ?? 'Select' }}</label>@if(isset($required))<span style="color: red">*</span>@endif @endisset //and so on

Entonces, mi pregunta es cómo hacer que el segundo conjunto de etiquetas sea 'requerido' (intervalo agregado) de @if(isset($required))*@endif en los activos cuando se elige el primer menú desplegable.

Yo he tratado

 const targetLabel = $('#fruits').prev('label'); targetLabel.addClass('required'); $('label[for="#fruits"]').append('<span style="color: red">*</span>'); $('label[for="#fruits"]').addClass('required'); $('#fruits').addClass('required'); $('#fruits').next('label').append('<span style="color: red">*</span>');

Había hecho la lógica cuando seleccioné. Entonces, el resto es agregar la clase 'requerida'. Gracias