Question 15228 in Laravel Question posted in
The official Laravel Documentation can be found here.

radio buttons keep switching – Laravel

I have three radio buttons but they not work properly. when I click one, the other one blink and then all of them seem unchecked. livewire model changes correctly but buttons mess it up.

  <div class="mt-4">
            <label  class="block mb-6">
                <input type="radio" name="package" class="custom-radio mr-2" wire:model="package" value="x" />
                x
            </label>      
            <label  class="block mb-6">
                <input type="radio" name="package" class="custom-radio mr-2" wire:model="package" value="y" />
                y
            </label>      
            <label  class="block mb-6">
                <input type="radio" name="package" class="custom-radio mr-2" wire:model="package" value="z" />
                z
            </label>      
        </div>
Tags:

2

Answers


  1. 0

    You can archieve the desired behavior by using the following code, checked attribute should be used

    <div class="mt-4">
  <label class="block mb-6">
    <input type="radio" name="package" class="custom-radio mr-2" wire:model="package" value="x" checked="{{ $package === 'x' ? 'checked' : '' }}" />
    x
  </label>      
  <label class="block mb-6">
    <input type="radio" name="package" class="custom-radio mr-2" wire:model="package" value="y" checked="{{ $package === 'y' ? 'checked' : '' }}" />
    y
  </label>      
  <label class="block mb-6">
    <input type="radio" name="package" class="custom-radio mr-2" wire:model="package" value="z" checked="{{ $package === 'z' ? 'checked' : '' }}" />
    z
  </label>      
</div>
    Login or Signup to reply.
  2. 0

    You have to give diffrent Id’s to all radio buttons. Now all radio buttons having No ID, so it is not selecting proper one

    Try below :

    <div class="mt-4">
    <label  class="block mb-6" for="rd_x">
        <input type="radio" name="package" class="custom-radio mr-2" wire:model="package" value="x" id="rd_x" />
        x
    </label>
    <label  class="block mb-6" for="rd_y">
        <input type="radio" name="package" class="custom-radio mr-2" wire:model="package" value="y" id="rd_y"  />
        y
    </label>
    <label  class="block mb-6" for="rd_z">
        <input type="radio" name="package" class="custom-radio mr-2" wire:model="package" value="z" id="rd_z"  />
        z
    </label>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search