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

Question

Below is the code where there are two conditions:

On selection of Carrier "AT&T", only four checkbox willbe displayed, Ear Piece, Leather Case, Car Charger and Label Only. Also, along with this, the checkbox associated behaves as radio button, (This is working fine).
On selection of Carrier "Sprint", all the checkbox will be displayed with normal behaviour of Checkbox.(This doesn't work with below code), rather the output is, once anyof the checkbox is clicked to mark check, it doesn't get unchecked on re-clicking it.

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();
});

Could someone help me with Point 2 resolution

score 1 · Answer 1 · edited May 23 '17 at 12:27

1

It looks to me like your unsetRadioBehave function is always checking the box when it is clicked rather than toggling.

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

You could unbind the original setRadioBehave behaviour to have the checkbox revert to it's natural state.

See the answer here: https://stackoverflow.com/a/210345/61470 for information on removing the event handler.

edited May 23 '17 at 12:27

Community

1
1

answered Apr 16 '14 at 10:59

how to unbind in here? – Padyster Apr 16 '14 at 11:01
Edited answer to include a link to an answer regarding unbinding of events – Apr 16 '14 at 11:43

score 0 · Answer 2 · answered Apr 16 '14 at 11:56

This worked for me:

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();
        }
    }

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

2 Answers2