利用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;">&nbsp;&nbsp;&nbsp;</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;">&nbsp;&nbsp;&nbsp;</div>
<#else>
<tr>
<td class="right" width="120px;">补货费用余额（SBU）：</td>
<td class="left">
                        ${bfee!'0'} 元&nbsp;&nbsp;<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'} 元&nbsp;&nbsp;<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;">&nbsp;&nbsp;&nbsp;</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中控制。。。。