即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

使用js实现checkbox的单选功能

编程语言 xiaozhouchou 75℃ 0评论

项目需求:

一、 调整原有“补货费用余额”字段调整为“补货费用余额(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中控制。。。。

转载请注明:CodingBlog » 使用js实现checkbox的单选功能

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情