Checkbox OnClick a Tortoise not a Hare

I have some jQuery executed onclick events on checkboxes. Its slow. Takes a second or so on firefox and half a second on safari.

I would not mind if it did not hold the page position as well. Does anyone know how to stop it from holding the page from being scrolled up or down while it executes the JS.

Any ideas?

Marvellous

EG.

onclick="level开发者_开发问答s();"

function levels() {

  var rqleveld = $(this).attr('src'); 
  var rqleveldA = Number($(this).attr('src'))+1; 
  var rqleveldB = Number($(this).attr('src'))+2; 
  if (!this.checked) { 
    $('input:checkbox[title=RQlevel' + rqleveld + ']').removeAttr('checked');
    $('input:checkbox[title=RQlevel' + rqleveld + ']').attr('disabled','disabled');
    $('span[title=RQlevel' + rqleveld + ']').css('display','block');
    $('input:checkbox[title=RQlevel' + rqleveldA + ']').removeAttr('checked');
    $('input:checkbox[title=RQlevel' + rqleveldA + ']').attr('disabled','disabled');
    $('span[title=RQlevel' + rqleveldA + ']').css('display','block');
    $('input:checkbox[title=RQlevel' + rqleveldB + ']').removeAttr('checked');
    $('input:checkbox[title=RQlevel' + rqleveldB + ']').attr('disabled','disabled');
    $('span[title=RQlevel' + rqleveldB + ']').css('display','block');
  }
  else if (this.checked) { 
    $('input:checkbox[title=RQlevel' + rqleveld + ']').removeAttr('disabled','disabled');
    $('span[title=RQlevel' + rqleveld + ']').css('display','none');
  }
product_analysis_global();
};

$(function() {

    $('input:checkbox').bind('change', levels);
});

function product_analysis_global() {
    $(':checked').each(function(){
        $('#product_' + this.alt).css('display','block');
        $('#product_quantity_PRI_' + this.alt).val(this.value);
        var quantity = $('#product_quantity_PRI_' + this.alt).val();
        var price = $('#product_price_PRI_' + this.alt).val();
        var duration = $('#product_duration_PRI_' + this.alt).val();
        var dives = $('#product_dives_PRI_' + this.alt).val();
        var hire = $('#product_hire_PRI_' + this.alt).val();

});
    $(':not(:checked)').each(function(){
        $('#product_' + this.alt).css('display','none');
        $('#product_quantity_PRI_' + this.alt).val('0');
        var quantity = $('#product_quantity_PRI_' + this.alt).val();
        var price = $('#product_price_PRI_' + this.alt).val();
        var duration = $('#product_duration_PRI_' + this.alt).val();
        var dives = $('#product_dives_PRI_' + this.alt).val();
        var hire = $('#product_hire_PRI_' + this.alt).val();

});
}

---

Some things to consider when you refactor this code:

1. product_analysis_global() is probably processing a large number of elements in either (or both) $.each() loops. My guess is that this alone is responsible for most of the perceived slowness. Maybe your page is itself very complex and/or large, resulting in a lot of time to find individual elements that are "checked" or "unchecked".
2. You are making lots and lots of "global" jQuery selections. While jQuery is very optimized to deal with $("<selector>") calls, try to use "local" selectors like $(<some element>).find("<child selector>") in the levels() function -- if that makes sense in this particular context of your app.
3. By the same logic of item 2, you may try storing the value of $("") calls if the selector is constant. For instance, instead of

    var rqleveld = $(this).attr('src'); 
    var rqleveldA = Number($(this).attr('src'))+1; 
    var rqleveldB = Number($(this).attr('src'))+2;

you can opt for

var $this = $(this);
var rqleveld = $this.attr('src'); 
var rqleveldA = Number($this.attr('src'))+1; 
var rqleveldB = Number($this.attr('src'))+2;