Question

I’m using a jquery plugin to customize the select box. My issue is I would like to bind/unbind click on the arrow button which would show the dropdown list.

I’ve upload my fiddle – http://jsfiddle.net/P6PeV/1/
So basically on click of ‘unbind’ it should remove the controls from the component and on click ‘bind it should bind back the controls.

Any help appreciated.

Answer 1

To do it properly I would modify the plugin slightly. This fiddle shows the principal of what i am suggesting:
http://jsfiddle.net/P6PeV/5/

as you can see it unbinds fine, unfortunatly how hte plugin was written its hard to rebind it correctly (im just trigging a show/hide).

The change i would suggest to the plugin would be:

replacement.find('.' + settings.className + '-moreButton').click(function(){
      if($(this_).attr('disabled') != 'disabled') { // <============= THIS LINE
        var thisMoreButton = jQuery(this);
        var otherLists = jQuery('.' + settings.className + '-list')
            .not(thisMoreButton.siblings('.' + settings.className + '-list'));
        hideList( otherLists );
        var thisList = thisMoreButton.siblings('.' + settings.className + '-list');

        if(thisList.filter(":visible").length > 0) {
            hideList( thisList );
        }else{
            showList( thisList );
        }
      } //<======== END IF

And then you dont need to unbind anything.. just:

$('#unbind').click(function() {
    $("#selectbox1").attr('disabled','disabled');
})
$('#bind').click(function() {
    $("#selectbox1").removeAttr('disabled');
})