如何通过JQuery根据数组正确启用/禁用单选按钮？

我正在使用以下代码，实现点击单选按钮时，根据预设数据数组的值来启用/禁用其他关联的单选按钮，但目前点击后其他按钮的禁用状态不正确：

错误效果：

预期效果（以点击“apple”为例）：仅启用数据中该选项对应的quantity（5、10、15）和package（bag）单选按钮

现有代码 #

JavaScript

$(document).ready(function(){
//array
var data = [ 
    {"fruit": "apple", "quantity": "5", "package": "bag"}, 
    {"fruit": "apple", "quantity": "10", "package": "bag"}, 
    {"fruit": "apple", "quantity": "15", "package": "bag"}, 
    {"fruit": "grapes", "quantity": "10", "package": "box"}, 
    {"fruit": "mango", "quantity": "5", "package": "bag"}, 
    {"fruit": "mango", "quantity": "10", "package": "bag"},
    {"fruit": "mango", "quantity": "15", "package": "box"},
    {"fruit": "mango", "quantity": "20", "package": "box"},
    {"fruit": "pineapple", "quantity": "5", "package": "bag"},
    {"fruit": "pineapple", "quantity": "10", "package": "bag"},
    {"fruit": "pineapple", "quantity": "15", "package": "box"},
    {"fruit": "pineapple", "quantity": "20", "package": "box"} 
];

function info(cat,value){
    var filteredValue = data.filter(function (item) {
          return item[cat]==value;
    });

    var vf = filteredValue;

    for(var i=0; i<vf.length;i++){
        var obj = vf[i];

        for(var key2 in obj){

            if(key2!=cat){
                var obj2 = obj[key2];
                $("input[name='opt_"+key2+"'][value!='"+obj2+"']").prop("disabled","disabled");
            }
            
        }
    }
}

$(".info input[type='radio']").click(function(){
    var value = $(this).val();
    var cat = $(this).attr("data-cat");

    info(cat,value);
});
});

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container info">
<div class="row">
<div class="col-md-12">

<div>Fruit</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" data-cat="fruit" name="opt_fruit" value="apple">Apple
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" data-cat="fruit" name="opt_fruit" value="grapes">Grapes
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" data-cat="fruit" name="opt_fruit" value="mango">Mango
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" data-cat="fruit" name="opt_fruit" value="pineapple">Pineapple
  </label>
</div>

</div>

<div class="col-md-12">

<div>Quantity</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" data-cat="quantity" name="opt_quantity" value="5">5
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" data-cat="quantity" name="opt_quantity" value="10">10
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" data-cat="quantity" name="opt_quantity" value="15">15
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" data-cat="quantity" name="opt_quantity" value="20">20
  </label>
</div>

</div>

<div class="col-md-12">

<div>Package</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" data-cat="package" name="opt_package" value="bag">Bag
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" data-cat="package" name="opt_package" value="box">Box
  </label>
</div>

</div>
</div>
</div>

问题原因 #

原代码循环每一条过滤后的数据，每次将不等于当前条目标值的单选按钮禁用。以apple为例，三条数据会依次执行：

1. 禁用quantity≠5的按钮 → 只剩5可用
2. 禁用quantity≠10的按钮 → 只剩10可用
3. 禁用quantity≠15的按钮 → 只剩15可用
   最终导致只有最后一条数据的对应值可用，和预期不符。

修复方案 #

修改info函数，调整逻辑为：

1. 先重置所有非当前分类的单选按钮为启用状态，避免之前的禁用状态残留
2. 收集当前分类下所有允许的关联值（自动去重）
3. 批量禁用不在允许列表中的单选按钮

修复后的JavaScript代码：

$(document).ready(function(){
//array
var data = [ 
    {"fruit": "apple", "quantity": "5", "package": "bag"}, 
    {"fruit": "apple", "quantity": "10", "package": "bag"}, 
    {"fruit": "apple", "quantity": "15", "package": "bag"}, 
    {"fruit": "grapes", "quantity": "10", "package": "box"}, 
    {"fruit": "mango", "quantity": "5", "package": "bag"}, 
    {"fruit": "mango", "quantity": "10", "package": "bag"},
    {"fruit": "mango", "quantity": "15", "package": "box"},
    {"fruit": "mango", "quantity": "20", "package": "box"},
    {"fruit": "pineapple", "quantity": "5", "package": "bag"},
    {"fruit": "pineapple", "quantity": "10", "package": "bag"},
    {"fruit": "pineapple", "quantity": "15", "package": "box"},
    {"fruit": "pineapple", "quantity": "20", "package": "box"} 
];

function info(cat,value){
    var filteredValue = data.filter(function (item) {
          return item[cat]==value;
    });

    // 1. 重置所有非当前分类的单选按钮为启用状态
    $(".info input[type='radio']").not("[data-cat='"+cat+"']").prop("disabled", false);

    // 2. 收集每个关联分类的允许值（去重）
    const allowedValues = {};
    filteredValue.forEach(item => {
        Object.keys(item).forEach(key => {
            if(key !== cat){
                if(!allowedValues[key]) allowedValues[key] = new Set();
                allowedValues[key].add(item[key]);
            }
        });
    });

    // 3. 禁用不在允许列表中的按钮
    Object.keys(allowedValues).forEach(key => {
        const allowedSet = allowedValues[key];
        $(`input[name='opt_${key}']`).each(function(){
            if(!allowedSet.has($(this).val())){
                $(this).prop("disabled", true);
            }
        });
    });
}

$(".info input[type='radio']").click(function(){
    var value = $(this).val();
    var cat = $(this).attr("data-cat");

    info(cat,value);
});
});

说明 #

• 用Set存储允许值，自动去重避免重复处理
• 先重置按钮状态，确保每次点击都是基于初始状态处理
• 批量处理关联分类按钮，逻辑清晰，结果符合预期

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