利用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中控制。。。。