Laravel 11：在Blade复选框组件中实现@checked指令遇阻

我之前在多个Laravel版本中一直使用自定义Blade复选框组件，最近接触到@checked和@selected指令，非常喜欢这种仅通过布尔值判断状态的简洁写法。但在Laravel 11中，无法在自定义复选框组件中正常使用@checked指令，目前只能转回使用原生input标签。

有效调用示例 #

<x-checkbox name="paid" label="Paid" 
    checked> // 正常生效
</x-checkbox>

失效调用示例 #

<x-checkbox name="paid" label="Paid" 
    @checked($ledger_row->paid == 1)> // 无法生效
</x-checkbox>

自定义Blade复选框组件代码 #

@props([ 'checked'=>false, 'name' => '', 'label' => '', 'disabled'=>false,])

<label class="inline-flex items-center mt-2">
    <input
        {{ $attributes->merge(['class' => 'form-checkbox h-5 w-5 text-green_500 rounded-md shadow-sm border-gray-300 focus:border-green-300 focus:ring focus:ring-green-200 focus:ring-opacity-50']) }}
        name="{{ $name }}"
        id="{{ $name }}"
        type="checkbox"  
        {{$checked?'checked':null}}
        {{$disabled?'disabled':null}}
    >
    <span class="ml-2 text-bf_brown text-sm font-medium">{{ $label }}</span>
</label>

@error($name)
<div class="text-red-600 text-sm">{{ $message }}</div>
@enderror

问题原因及修复方案 #

问题根源在于当前组件的实现逻辑：外部通过@checked生成的checked属性，会被组件内部硬编码的{{$checked?'checked':null}}覆盖，且组件的checked默认值为false，不会自动接收外部指令生成的状态。

提供两种可行修复方式：

方式一：完全通过$attributes处理属性（推荐）

修改组件，让$attributes接管所有input属性的合并，包括checked状态，同时保留原有props的兼容性：

@props([ 'name' => '', 'label' => '', 'disabled'=>false,])

<label class="inline-flex items-center mt-2">
    <input
        {{ $attributes->merge([
            'class' => 'form-checkbox h-5 w-5 text-green_500 rounded-md shadow-sm border-gray-300 focus:border-green-300 focus:ring focus:ring-green-200 focus:ring-opacity-50',
            'name' => $name,
            'id' => $name,
            'type' => 'checkbox',
            'disabled' => $disabled
        ]) }}
    >
    <span class="ml-2 text-bf_brown text-sm font-medium">{{ $label }}</span>
</label>

@error($name)
<div class="text-red-600 text-sm">{{ $message }}</div>
@enderror

修改后，无论是直接传入checked属性，还是使用@checked($condition)指令，都会通过$attributes正确应用到input标签上，同时disabled等参数也能正常生效。

方式二：保留props并兼容外部指令

如果想保留组件内部的checked props，可以调整逻辑，优先使用外部传入的checked状态：

@props([ 'checked' => false, 'name' => '', 'label' => '', 'disabled'=>false,])

<label class="inline-flex items-center mt-2">
    <input
        {{ $attributes->merge(['class' => 'form-checkbox h-5 w-5 text-green_500 rounded-md shadow-sm border-gray-300 focus:border-green-300 focus:ring focus:ring-green-200 focus:ring-opacity-50']) }}
        name="{{ $name }}"
        id="{{ $name }}"
        type="checkbox"  
        @checked($attributes->has('checked') ? true : $checked)
        {{$disabled?'disabled':null}}
    >
    <span class="ml-2 text-bf_brown text-sm font-medium">{{ $label }}</span>
</label>

@error($name)
<div class="text-red-600 text-sm">{{ $message }}</div>
@enderror

这种方式下，当外部使用@checked($condition)时，组件会检测到该属性并优先使用外部的判断结果，同时也兼容直接传入checked属性的场景。

内容的提问来源于stack exchange，提问作者wruckie