如何优化jQuery代码：选中数量选项时禁用其余选项

我写了一段jQuery代码，当选中id为quantity-1的选项且其值不为"0"时，会禁用quantity-2至quantity-12的所有选项；若值为"0"则恢复启用。但我不想为每个quantity选项重复编写这段代码，请问能否修改代码，实现选中任意一个选项时，自动禁用其余所有选项？

原代码如下：

$("#quantity-1").change(function () {
    if ($("#quantity-1").val().trim() != "0") {
        $("#quantity-2").prop('disabled', true);
        $("#quantity-3").prop('disabled', true);
        $("#quantity-4").prop('disabled', true);
        $("#quantity-5").prop('disabled', true);
        $("#quantity-6").prop('disabled', true);
        $("#quantity-7").prop('disabled', true);
        $("#quantity-8").prop('disabled', true);
        $("#quantity-9").prop('disabled', true);
        $("#quantity-10").prop('disabled', true);
        $("#quantity-11").prop('disabled', true);
        $("#quantity-12").prop('disabled', true);
    } else {
        $("#quantity-2").prop('disabled', false);
        $("#quantity-3").prop('disabled', false);
        $("#quantity-4").prop('disabled', false);
        $("#quantity-5").prop('disabled', false);
        $("#quantity-6").prop('disabled', false);
        $("#quantity-7").prop('disabled', false);
        $("#quantity-8").prop('disabled', false);
        $("#quantity-9").prop('disabled', false);
        $("#quantity-10").prop('disabled', false);
        $("#quantity-11").prop('disabled', false);
        $("#quantity-12").prop('disabled', false);
    }
});

当然可以，只需要通过统一选择器选中所有quantity元素，绑定一次事件就能实现需求，不用重复写代码。这里分两种场景给出方案：

方案1：无需修改HTML（用属性选择器） #

直接通过[id^="quantity-"]选择所有id以quantity-开头的元素，绑定change事件：

// 选中所有id以quantity-开头的元素，绑定change事件
$('[id^="quantity-"]').change(function() {
    const currentVal = $(this).val().trim();
    // 选中除当前元素外的所有quantity元素
    const otherQuantities = $('[id^="quantity-"]').not(this);
    
    if (currentVal !== "0") {
        // 禁用其他所有选项
        otherQuantities.prop('disabled', true);
    } else {
        // 恢复启用其他所有选项
        otherQuantities.prop('disabled', false);
    }
});

方案2：推荐（给元素加统一类名） #

如果能修改HTML，给所有quantity元素加上同一个类名（比如quantity-select），用类选择器会比属性选择器更高效：

<!-- 示例HTML结构 -->
<select id="quantity-1" class="quantity-select">...</select>
<select id="quantity-2" class="quantity-select">...</select>
<!-- 其他quantity元素同理 -->

对应的jQuery代码：

$('.quantity-select').change(function() {
    const currentVal = $(this).val().trim();
    const otherQuantities = $('.quantity-select').not(this);
    
    otherQuantities.prop('disabled', currentVal !== "0");
});

代码说明 #

• $(this)：指代当前触发change事件的选项元素，避免重复通过id查找
• .not(this)：排除当前元素，只选中其余所有quantity元素
• 方案2里直接用currentVal !== "0"作为disabled的赋值，简化了if-else逻辑，因为布尔值刚好对应禁用/启用状态

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