利用js实现checkbox的单选功能

项目需求：

一、 调整原有“补货费用余额”字段调整为“补货费用余额（SBU）”,新增“补货费用余额（总部）”字段



备注：字段展示金额为总金额，后台按表单号对应金额

创建补货订单后，必须勾选费用池 才能添加产品 只能单选

实现：利用checkbox实现单选功能，不选择状态，隐藏添加产品按钮即可：

前台展示部分代码：

<#if position.org??  &&  orderForm.orderTypeCode == "CUST" && (!orderForm.giftType?? || orderForm.giftType == "1")>
<tr>
<td class="right" width="120px;">补货费用余额（SBU）：</td>
<td class="left">
${bfee!'0'} 元
</td>

<td class="right" width="120px;">补货费用余额（总部）：</td>
<td class="left">
${bfee!'0'} 元
</td>
</tr>
</table>

<div style="height:2px;line-height:2px;">   </div>

<!-- 产品信息 -->

<div>
<div class="right" id="addProduct" style="margin-bottom: 5px;">
<#if bFlag=="N">
<input type="button" class="m-btn" id="selectProduct" value=" 添加产品 " />
</#if>
</div>
<table id='Products'></table>
</div>

<div style="height:20px;line-height:20px;">   </div>
<#else>
<tr>
<td class="right" width="120px;">补货费用余额（SBU）：</td>
<td class="left">
${bfee!'0'} 元  <input type="checkbox" class="cbox" id="bfee_sbu" value="${bfee!''}" name="bfee_sbu" />
</td>

<td class="right" width="120px;">补货费用余额（总部）：</td>
<td class="left">
${bfee!'0'} 元  <input type="checkbox" class="cbox" id="bfee_zb" value="${bfeee!''}" name="bfee_zb"/>
</td>
</tr>
</table>
<div>
<div class="right" id="addProduct" style="margin-bottom: 5px;display:none;">
<#if bFlag=="N">
<input type="button" class="m-btn" id="selectProduct" value=" 添加产品 " />
</#if>
</div>
<table id='Products'></table>
</div>

<div style="height:20px;line-height:20px;">   </div>
</#if>

JS控制部分：

$(document).ready(function(){
$(".cbox").click(function(){
if($("#bfee_sbu").prop("checked")||$("#bfee_zb").prop("checked")){
document.getElementById('addProduct').style.display="block";
if($(this).prop("checked")) {
$(":checkbox[type=checkbox]").removeAttr("checked");
$(this).prop("checked","true");
}else{
$(this).prop("checked","false").siblings().prop("checked","false");
}
}else{
document.getElementById('addProduct').style.display="none";
}
});
});

大致就是这些 主要看js中控制。。。。