jQuery problems with function

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.

• omma2289: Please show your HTML markup, what is the element with id category?
• mstojanov: <select name="category" id="category"> The select input with my categories options

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

• mstojanov: This could work. But as you can see i'm making another if(selection == '10') where i'm slidingDown another different div tags. Thats becuase here i have another if selection == 10. I'm not sliding only the default div which have to be slided down but if selection is 10 the default div and another div to be slided down based on the category requirements.
• Edgar Villegas Alvarado: But it's included in your if(radio == '4' && selection == '10') condition, right?
• mstojanov: Yeah. Its included like this: if(selection == '10'){ $("input:radio[name='checkbox']").click(function() { var selection = $('#category').val(); var radio = $(this).val(); if(radio == '4' && selection == '10') { $('#slidedown_another').slideUp(); } else { $('#slidedown_another').slideDown(); } })
• mstojanov: And based on selection 10 i want to activate the radio function and after the radio function i'm sliding down another div. I dont have idea how can i fix this problem

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.

• Barmar: Ahh, got a little confused because he named his radio buttons checkbox.
• Barmar: Make a fiddle if you want me to troubleshoot more.