React中如何实现单选Checkbox而非多选？

你需要让一组Checkbox只能单选，同时保留「禁用Checkbox时无需强制选中其他选项」的特性，以下是两种适配场景的可行方案：

原生JS方案（适合非框架场景） #

给目标Checkbox统一添加类名，通过事件监听控制单选逻辑：

<C.SingleCard>
    <h2>Pizza</h2>
    <div>
        <hr />
        <h3>Flavors</h3>
        <hr />
    </div>
    <div>
        <h4>Pepperoni</h4>
        <input type="checkbox" name='flavor' class="single-select-checkbox" />
    </div>
    <div>
        <h4>Chicken</h4>
        <input type="checkbox" name='flavor' class="single-select-checkbox" disabled />
    </div>
    <div>
        <h4>Bacon</h4>
        <input type="checkbox" name='flavor' class="single-select-checkbox" />
    </div>
    <div>
        <button>Add</button>
    </div>
</C.SingleCard>

<script>
const checkboxes = document.querySelectorAll('.single-select-checkbox');

checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        if (this.checked && !this.disabled) {
            checkboxes.forEach(other => {
                if (other !== this && !other.disabled) {
                    other.checked = false;
                }
            });
        }
    });
});
</script>

逻辑说明 #

• 统一类名single-select-checkbox用于批量选择同组元素
• 监听每个Checkbox的change事件，当未禁用的Checkbox被选中时，将同组其他未禁用的Checkbox设为未选中
• 禁用的Checkbox不会触发状态变更，也不会被其他操作修改，完全满足禁用时无需选中其他选项的需求

React状态管理方案（适配你的组件场景） #

如果是React项目，用状态控制Checkbox的选中状态更符合框架规范：

import { useState } from 'react';

function PizzaCard() {
    const [selectedFlavor, setSelectedFlavor] = useState(null);

    const handleCheckboxToggle = (flavor) => {
        setSelectedFlavor(prev => prev === flavor ? null : flavor);
    };

    return (
        <C.SingleCard>
            <h2>Pizza</h2>
            <div>
                <hr />
                <h3>Flavors</h3>
                <hr />
            </div>
            <div>
                <h4>Pepperoni</h4>
                <input 
                    type="checkbox" 
                    name='flavor' 
                    checked={selectedFlavor === 'pepperoni'}
                    onChange={() => handleCheckboxToggle('pepperoni')}
                />
            </div>
            <div>
                <h4>Chicken</h4>
                <input 
                    type="checkbox" 
                    name='flavor' 
                    checked={selectedFlavor === 'chicken'}
                    onChange={() => handleCheckboxToggle('chicken')}
                    disabled
                />
            </div>
            <div>
                <h4>Bacon</h4>
                <input 
                    type="checkbox" 
                    name='flavor' 
                    checked={selectedFlavor === 'bacon'}
                    onChange={() => handleCheckboxToggle('bacon')}
                />
            </div>
            <div>
                <button>Add</button>
            </div>
        </C.SingleCard>
    );
}

逻辑说明 #

• 用useState存储当前选中的口味标识，初始值为null表示未选中任何选项
• 每个Checkbox的checked属性由状态直接控制，点击时切换状态：如果是已选中的选项则取消选中，否则设置为当前选项
• 禁用的Checkbox无法触发onChange事件，即使状态匹配也无法操作，完美适配你的需求

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