How to uniquely identify the jQuery function on checkBox change click?

Question

In my program i display one question at a time and on next click it is post and get the second question. But i apply some logic for check box list for each question in Jquery, and i call it like this

 $(document).ready(function () {


        $("input:checkbox").change(function () {
            var txt = $(this).parent().children("label").text();
            if ($(this).is(':checked')) {
                if ($(this).parent().children("label").text() == 'Not Sure') {
                    $("input:checkbox").attr('checked', false);
                    $("input:checkbox").attr('disabled', true);
                    $(this).attr('checked', true);
                    $(this).attr('disabled', false);
                }
            }
            else {
                if ($(this).parent().children("label").text() == 'Not Sure') {
                    $("input:checkbox").attr('checked', true);
                    $("input:checkbox").attr('disabled', false);
                    $(this).attr('checked', false);

                }
            }
        });


        $("input:checkbox").change(function () {
            var txt = $(this).parent().children("label").text();
            if ($(this).is(':checked')) {
                if (txt == 'Not Sure' || txt == 'We Are Large Business' || txt == 'None of these apply') {
                    $("input:checkbox").attr('checked', false);
                    $("input:checkbox").attr('disabled', true);
                    $(this).attr('checked', true);
                    $(this).attr('disabled', false);
                }
            }
            else {
                if (txt == 'Not Sure' || txt == 'We Are Large Business' || txt == 'None of these apply') {
                    $("input:checkbox").attr('checked', false);
                    $("input:checkbox").attr('disabled', false);
                    $(this).attr('checked', false);
                }
            }
        });

    });

So the problem is that, for 1 question the logic is different from the other check box list question and i need to call appropriate function as you above see in document.ready has got two function. So how for some particular question i should fix the call to function?

Answer 1

on every post use jQuery unbind function to remove event handler binding. for reference have a look at this .

Answer 2

You could use some custom events and fire the appropriate event depending on the question, here some code:

$(document).ready(function () {
    $("input:checkbox").on("someQuestions", function () {
        var txt = $(this).parent().children("label").text();
        if ($(this).is(':checked')) {
            if ($(this).parent().children("label").text() == 'Not Sure') {
                $("input:checkbox").attr('checked', false);
                $("input:checkbox").attr('disabled', true);
                $(this).attr('checked', true);
                $(this).attr('disabled', false);
            }
        }
        else {
            if ($(this).parent().children("label").text() == 'Not Sure') {
                $("input:checkbox").attr('checked', true);
                $("input:checkbox").attr('disabled', false);
                $(this).attr('checked', false);
            }
        }
    });

    $("input:checkbox").on("anotherQuestions", function () {
        var txt = $(this).parent().children("label").text();
        if ($(this).is(':checked')) {
            if (txt == 'Not Sure' || txt == 'We Are Large Business' || txt == 'None of these apply') {
                $("input:checkbox").attr('checked', false);
                $("input:checkbox").attr('disabled', true);
                $(this).attr('checked', true);
                $(this).attr('disabled', false);
            }
        }
        else {
            if (txt == 'Not Sure' || txt == 'We Are Large Business' || txt == 'None of these apply') {
                $("input:checkbox").attr('checked', false);
                $("input:checkbox").attr('disabled', false);
                $(this).attr('checked', false);
            }
        }
    });

    $("input:checkbox").change(function(){

        // apply some logic to find out if is one question or another
        if ( someQuestion ) {
            $(this).trigger("someQuestions");
        } 
        else {
            $(this).trigger("anotherQuestions");
        }

    });
});

hope it helps