.click() doesn't fire function?

I have checkboxes that toggle on/off select option values. This part works fine.

Now I want to "check" the check box after page load by default.

I tried .click() that checks the checkbox but doesn't run the click code that is linked to it. Tested on firefox 6.0.2, Safari & Chrome. Any suggestion how to do so?

jsfiddle example is here or below

$(function(){

    $selectClone = $("select[name=db2_timestamp]").clone(true);
    $("input[name=hideit]").click(function(){
        var $this;
        $selectClone.find("option").attr("disabled", false);

        $("input[name=hideit]").each(function(){
            var value = $(this).attr('value');

            if($(this).is(":checked")){

                $selectClone.find("option").each(function(){
                    $this = $(this);
                    if($this.val().indexOf(value) != -1){
                        $this.attr("disabled", true);
                    }
                });
            }        
        })       

        var $select = $("select[name=db2_timestamp]")
        $select.children().remove();

    开发者_开发百科    $selectClone.find("option:enabled").each(function(){
             $select.append($(this).clone(true));
         });
    });
    $("input[value=w]").click();
});

Move the hide/show bits into a function and call the function both in the click handler and in an initialize function. Fiddle here

Um... works for me on Safari 5.0.4. I suspect that on whatever browser you are running, .click() doesn't work for checkboxes for some reason. Try running the code on change as well, maybe.

I believe you need to call your function separately.

The following should work:

$(function(){

  $selectClone = $("select[name=db2_timestamp]").clone(true);
  var $click = function(){
    var $this;
    $selectClone.find("option").attr("disabled", false);

    $("input[name=hideit]").each(function(){
        var value = $(this).attr('value');

        if($(this).is(":checked")){

            $selectClone.find("option").each(function(){
                $this = $(this);
                if($this.val().indexOf(value) != -1){
                    $this.attr("disabled", true);
                }
            });
        }        
    })       

    var $select = $("select[name=db2_timestamp]")
    $select.children().remove();

    $selectClone.find("option:enabled").each(function(){
         $select.append($(this).clone(true));
     });
  };
  $("input[name=hideit]").click($click);
  $("input[value=w]").click();
  $click();
});

Here's a working jsfiddle

Your click function is getting called, but when it runs the checkbox has not been checked yet. This can be confirmed with an alert at the top of your click function.

The problem is that your click function is running before Firefox actually checks the box, so your selector that finds the ":checked" inputs does not yet include the checkbox you triggered.

There are a number of ways you could fix this, either of these should get you started: 1. setting the checked property within your click function 2. only work with the checkbox that was clicked, not each checkbox

When you call the click() method, it seems to be running the Javascript methods bound to that event before actually setting the checked property. I believe this is the root of the problem in your initial post.

By setting the checked property manually first, then running the standard callback associated with a click event, we can mimic the standard behavior. I've written this code out and posted it in this Fiddle. I also cleaned up the code a bit and made it so the select box retains the selected option when other options are shown or hidden.