复选框确实'nt在表现得像单选按钮之后,再次表现得很理想

Check Box does'nt behaves back again ideally after behaving like radio button

本文关键字:之后 单选按钮 理想 nt 复选框      更新时间:2023-09-26

下面是有两个条件的代码:

  1. 选择运营商"AT&T"后,将只显示四个复选框,耳塞,皮套,汽车充电器和标签。此外这样,关联的复选框将表现为单选按钮,(这是工作良好)
  2. 选择运营商"Sprint"后,将显示所有复选框复选框的正常行为。(以下不适用代码),而输出是,一旦点击任何复选框标记check,重新单击它时不会取消选中

HTML

<p class="clearboth" id="carrierdropdown">
                  <label for="carriername">* Carrier Name</label>
                    <select name="carriername" id="carriername">
                        <option value="">Please Select</option>
                        <option value="att">AT&T</option>
                        <option value="sprint">Sprint</option>
                    </select>
                </p>
<fieldset id="accessories_block">
              <legend>Accessories</legend>
              <p class="clearboth"> Were there any accessories affected
                by the incident? </p>
              <div class="leftcolumn">
                <div id="accessories1">
                  <input class="battery_ele hide_att" type="checkbox" name="accbattery" value="accbattery" />
                  <em class="battery_ele hide_att">Battery</em>
                  <input type="checkbox" name="acchomecharger" value="acchomecharger"  class="homecharger_ele hide_att" />
                  <em class="homecharger_ele hide_att" >Home Charger</em>
                  <input type="checkbox" name="accearpiece" value="accearpiece" />
                  <em>Ear Piece</em>
                  <input type="checkbox" name="accsim" value="accsim" class="simcard simcard_ele hide_att"  />
                  <em class="simcard_ele hide_att">SIM Card</em>
                  <input type="checkbox" name="acclabel" value="acclabel"  />
                  <em>Label Only</em> </div>
              </div>
              <div class="rightcolumn checkbox">
                <input type="checkbox" name="accbeltclip" value="accbeltclip" class="hide_att" />
                <em class="hide_att">Belt Clip</em>
                <input type="checkbox" name="acccase" value="acccase"  />
                <em>Leather Case</em>
                <input type="checkbox" name="accmemory" value="accmemory"  class="hide_att"/>
                <em class="hide_att">Memory Card</em>
                <input type="checkbox" name="acccharger" value="acccharger"  />
                <em>Car Charger</em>
                 </div>
            </fieldset>

Javascript

 $('document').ready(function(){
    var epaper = {          
        carrier : 'nocarrier',
        carrier_name : $("#carriername"),
        hideATT :$('.hide_att'),
        OnCarrierChange: function(){
            epaper.carrier_name.change(function() {
                epaper.setAccessoryChosen();
            });
        },
        getSelCarr : function (){ return (epaper.carrier_name.val() != '') ? epaper.carrier_name.val() : epaper.carrier; },
            acc_blk_inp_chk : $('#accessories_block input[type=checkbox]'),
    convertCheckboxToRadio : function(){
        /*epaper.acc_blk_inp_chk.not($('#accessories_block input[type=checkbox]')).not(".simcard").removeAttr("checked");   */
        $('#accessories_block input[type=checkbox]').not($(this)).not(".simcard").removeAttr("checked");    
    },
    setRadioBehave : function (){
        $('#accessories_block input[type=checkbox]').click(function(){
            epaper.convertCheckboxToRadio();
            $(this).attr('checked','checked');
        });
    },
    unsetRadioBehave : function (){ 
        $('#accessories_block input[type=checkbox]').click(function(){
            $(this).attr('checked','checked');
        });
    },
    setAccessoryChosen : function(){
        var carrier = '';
        var carrier = epaper.getSelCarr(); 
        $('#accessories_block input[type=checkbox]').unbind('click');
        epaper.acc_blk_inp_chk.attr("checked",false);
        if(carrier == "att"){
            epaper.hideATT.hide();
            epaper.setRadioBehave();
        } else {
            epaper.unsetRadioBehave();
            epaper.hideATT.show();
        }
    }   
    };
epaper.OnCarrierChange();
});

有人能帮我处理点2分辨率吗

在我看来,您的unsetRadioBehave函数在单击时总是选中该框,而不是切换。

unsetRadioBehave : function (){ 
    $('#accessories_block input[type=checkbox]').click(function(){
        $(this).attr('checked','checked'); // <---- always checking the box
    });
},

您可以解除对原始setRadioBehave行为的绑定,使复选框恢复到其自然状态。

请在此处查看答案:https://stackoverflow.com/a/210345/61470有关删除事件处理程序的信息。

这对我有效:

setAccessoryChosen : function(){
        var carrier = '';
        var carrier = epaper.getSelCarr(); 
        $('#accessories_block input[type=checkbox]').unbind('click');
        epaper.acc_blk_inp_chk.attr("checked",false);
        if(carrier == "att"){
            epaper.hideATT.hide();
            epaper.setRadioBehave();
        } else {
            $(this).unbind('click');
            //epaper.unsetRadioBehave();
            epaper.hideATT.show();
        }
    }