Question

Here is the link on simple example on jsfiddle

$(document).ready(function(){
  $('input[type=checkbox]').live("click", function() {
    if($(this).attr('class') == 'color_checkboxes') {
      if($(this).attr('id') == 'is_checked') {
        $(this).removeAttr('id');
        $(this).attr('checked', false);
      } else {
        $('input[type=checkbox][class=color_checkboxes]').attr('checked', false);
        $(this).attr('checked', true).attr('id', 'is_checked');                
      }
    }
  })
});

​

The goal is to check one checkbox – add it the ID value is_checked, click on an other one and to this checkbox add the ID is_checked and remove the ID is_checked to the previous one.

Example – check the checkbox green, then blue and then again green – the green button will be not checked – I mean, that the reason isis_checked. When you try to check second time the green button, then it works already.

That’s not much user-friendly behavior, so I would like to ask you, if there is some way/suggestion, how to fix it.

Thanks

Answer 1

$(document).ready(function() {
    var checkboxes = $('.color_checkboxes:checkbox');

    checkboxes.click(function(e) {
        var clicked = $(this);

        checkboxes.not(clicked).removeAttr('id').attr('checked', false);

        if(clicked.attr('checked')) {
            clicked.attr('id', 'is_clicked');
        } else {
            clicked.removeAttr('id');
        }
    });
});

http://jsfiddle.net/xkMKk/1/