jQuery函数问题

Question

What i'm trying to do here is if the selection is equal to value 10 the click function to be available only if selection is equal to 10. But when i change to other ex. category with different value the radio click function is still available. ?

I have 6 radio boxes with value 1,2,3,4,5,6 so what i want to do if value == 4 to slidedown another div while i'm in category with value 10.(selection).

How can i fix this problem ? Here is my sample code.

$('#category').on('change', function () {

    var selection = $(this).val();
    $('#slidedown'+selection).slideDown(200);

    if(selection == '10'){
        $("input:radio[name='checkbox']").click(function() {
            var radio = $(this).val();
            if(radio == '4' && selection == '10') {
                $('#slidedown'+selection).slideUp();    
            } else {
                $('#slidedown'+selection).slideDown();  
            }                    
        });
    });

Thanks, any help will be appreciated.

EDIT : I want to slideUp the currect div which is slided down by the category value if radio box with value 4 is checked.

Answer 1

You should have another selection var inside the click callback:

$('#category').on('change', function () {
    var selection = $(this).val();
    $('#slidedown'+selection).slideDown(200);            
});    

    $("input:radio[name='checkbox']").click(function() {
        var selection = $('#category').val();   //This does the trick
        var radio = $(this).val();
        if(radio == '4' && selection == '10') {
            $('#slidedown_another').slideUp();    
        } else {
            $('#slidedown_another').slideDown();  
        }                    
    });

Also, callbacks must be separated for not binding a new listener each time

Hope this helps. Cheers

Answer 2

Use the disabled property to enable and disable the radio buttons.

$('#category').change(function() {
    var selection = $(this).val();
    $('#slidedown'+selection).slideDown(200);

    $('input:radio[name=checkbox]').prop('disabled', selection != '10');
});

$("input:radio[name='checkbox']").click(function() {
    var radio = $(this).val();
    if(radio == '4') {
        $('#slidedown_another').slideUp();    
    } else {
        $('#slidedown_another').slideDown();  
    }                    
});

Your code is adding a handler when the select has the correct value, but it never removes the handler when the select changes to a different value. Also, every time they select 10 it was adding another handler, so the handler would then run multiple times.