jquery 已选中具有相同销售代码的复选框时,禁用其他复选框

wz8daaqr  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(121)

有人能帮我一下这个吗?

我有这个列表在我的表与复选框。正如你所看到的,有重复的销售代码。
我想做的是,如果我选中一行,其他复选框行与类似的销售代码应该被禁用,像这样。然后我也应该能够检查其他行与不同的销售代码。

提前感谢!

tct7dpnv

tct7dpnv1#

input事件侦听器中,将其他HTMLInputElementsdisabled属性(复选框)设置为当前checked状态。下面是一个带有optionAoptionB复选框的代码示例:

optionA.addEventListener('input', () => {
    optionB.disabled = optionA.checked;
});
optionB.addEventListener('input', () => {
    optionA.disabled = optionB.checked;
});

每次用户选中或取消选中复选框时,都会引发相应的事件。如果选中的状态是true,则将另一个复选框上的disabled属性设置为true。如果选中状态为false或未选中,则将另一个复选框上的disabled属性设置为false以重新启用它。

gkn4icbw

gkn4icbw2#

需要更多关于如何渲染HTML的细节。您可以做的是,为复选框添加一个事件侦听器(可能基于类名),但也要将自定义属性添加到复选框,并将销售代码值分配给该自定义属性
我已经添加了一个工作代码片段,你可以根据你的需要改进它

$(document).ready(function(){

  $(".salesCodeChk").change(function(){
       var salesCode = $(this).attr("sales-code");  
       $(".salesCodeChk").prop("disabled", false);
       if(this.checked){
          
          $("[sales-code='" + salesCode + "']").not(this).prop("disabled",true);
       }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="salesCodeChk" sales-code="ISK12345"/>ISK12345</br>
<input type="checkbox" class="salesCodeChk" sales-code="ISK12345"/>ISK12345</br>
<input type="checkbox" class="salesCodeChk" sales-code="ISK123456"/>ISK123456

相关问题