jQuery change event handler with checkbox

Question

I have a checkbox and when it is enabled(checked), I want code to execute. It works but when the box is unchecked, the code still works, I would prefer it not work when the box is unchecked. The following code is within a larger jQuery function that works. I just can't get the code to stop working when I uncheck the box. For reference, the check box allows the user to use arrow keys to adjust a canvas element. I want them to be able to adjust when the box is checekd and not be able to adjust when it is unchecked.

$("#hMove728").click( function(){
   if($(this).is(':checked')){
    alert("checked");

    $(document).keydown(function(key) {
            switch(parseInt(key.which,10)) {
                case 38:
                    context.yB -= 2;
                break;
                    case 39:
                    x += 2;
            break;
            case 40:
                y += 2;
            break;
            case 37:
                x -= 2;
            break;
            default:
            break;
       }
     update();

    })
   }

});

An event handler inside another event handler seems to be a really bad idea, at least in this case. — adeneo
– adeneo, Commented Dec 2, 2013 at 18:48
How can I fix? This seems like it should be a simple fix, extra event handler or not. Right? — dandlezzz
– dandlezzz, Commented Dec 2, 2013 at 18:49
See the answer by @Cuberto , that has the general principle, just check it the checkbox is checked withing the keydown event handler. — adeneo
– adeneo, Commented Dec 2, 2013 at 18:55

sbking · Accepted Answer · 2013-12-02 18:51:48Z

2

Here, check the state of the checkbox inside the event handler:

var moveCheckbox = $("#hMove728");
$( document ).keydown( function( key ) {
  if ( moveCheckbox.is(":checked") ) {
    // ...
  }
});

answered Dec 2, 2013 at 18:51

sbking

7,71027 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dandlezzz Over a year ago

THanks! this works. I don't quite understand why, but at least it works.

sbking Over a year ago

It works because the state of the checkbox is checked every time the key is pressed. In your original, you were adding the keydown event handler to the document every time you would click on the checkbox - which is probably a bad idea - it's better to avoid defining event handlers within another event handler.

bagonyi · Accepted Answer · 2013-12-02 18:49:09Z

0

$(function () {
    $('input').on('change', function () {
        if ($(this).prop('checked')) {
            // It is checked
        }
    });
});

answered Dec 2, 2013 at 18:49

bagonyi

3,3182 gold badges24 silver badges21 bronze badges

Comments

Nosferato · Accepted Answer · 2013-12-02 18:56:32Z

0

in else put the: $(document).unbind('keydown');

that will unbind the event with the name of keydown on document element.

answered Dec 2, 2013 at 18:56

Nosferato

1

Comments

Vinicius Lima · Accepted Answer · 2013-12-02 19:04:32Z

You have to "unregister" the "keydown" event on your document when you remove the check, or you can make the check inside your keydown function. Like this:

$(document).keydown(function(key) {
    if(!$("#hMove728").is(':checked')) return;
    switch(parseInt(key.which,10)) {
        case 38:
            context.yB -= 2;
        break;
            case 39:
            x += 2;
        break;
        case 40:
            y += 2;
        break;
        case 37:
            x -= 2;
        break;
        default:
        break;
   }
   update();
});

Collectives™ on Stack Overflow

jQuery change event handler with checkbox

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related