使用Jquery的多条件复选框过滤器

Checkbox Filter with Multiple Condition using Jquery

本文关键字：复选框 过滤器 条件 Jquery 使用      更新时间：2023-09-26
<div id="c_b" class="checkbox-elemet">
    <div class="checkbox">
        <input type="checkbox" value="nri" id="nri" name="status[]"><label for="nri">NRI</label></div>
        <div class="checkbox"><input type="checkbox" id="resident" value="resident" name="status[]"><label for="resident">Resident</label></div>
        <div class="checkbox"><input type="checkbox" disabled="true" id="salaried" value="salaried" name="status[]"><label for="salaried">Salaried</label></div>
        <div class="checkbox"><input type="checkbox" disabled="true" id="self_employed" value="self_employed" name="status[]"><label for="self_employed">Self</label></div>
        <div class="checkbox"><input type="checkbox" disabled="true" id="govt_employee" value="govt_employee" name="status[]"><label for="govt_employee">Govt.</label></div>
        <div class="checkbox"><input type="checkbox" disabled="true" id="others" value="others" name="status[]"><label for="others">Others</label></div>
</div>

要启用每个复选框，应满足以下条件:

  1. NRI,Resident应该启用最初，所有其他都是禁用的
  2. NRI检查:仅受薪和别人使
  3. NRI和受薪检查:没有其他使
    4. 居民检查:工薪阶层，政府，其他，自我应该使
  4. 居民和受薪检查:启用
  5. 常驻自检:无其他使

任何人都可以帮我想出一个简单的解决办法。

你的代码可以是像这样:

$(document).ready(function(){
     //1. NRI,Resident should enable initially, all other are disabled
     disableAll(); $("#nri", "#resident").attr("disabled", false);
     //Req 2
     $("#c_b :checkbox").change(function(){
        //2. NRI checked : Only Salaried and Others enable 
        if(isChecked("#nri")){ disableAll(); enable("#salaried, #others"); }
        //3. NRI and Salaried checked : No other Enable
        if(isChecked("#nri") && isChecked("#salaried")){ disableAll(); enable("#nri, #salaried"); }
        //4. Resident checked : All child should enable
        //what is child?
        //5. Resident and Salaried checked : Govt. and Other enable 
        if(isChecked("#resident") && isChecked("#salaried")){ enable("#govt_employee, #others"); }
        // 6. Resident and Self checked : No other Enable
        if(isChecked("#resident") && isChecked("#self_employed")){ disableAll(); enable("#resident, #self_employed"); }
     });
  });
  function disableAll(){
     $("#c_b :checkbox").attr("disabled", true);
  }      
  function isChecked(id){
     return $(id).is(":checked");
  }
  function enable(sel){
     $(sel).attr("disabled", false);
  }

我不明白你的第四个要求。希望对大家有所帮助

相关文章：