CODEWITHSUNDEEP
jquery
user1048676
user1048676

Reputation: 10076

jQuery prevents radio button from being clicked

All, I've got the following code to run through when a radio button is clicked to see if there is at least one entry in the group(s) choosen.

jQuery("input[type=radio]").click(function(event){
    alert('it is clicked');
    var num_questions = jQuery("#num_questions").val();
    var new_questions = parseInt(num_questions) + 1;
    for(var i=1; i<new_questions; i++){
        var radios = jQuery("input[type=radio]");
        var group  = radios.filter('[name=rating_value_'+i+']');
        if(group.filter(":checked").length==0){
            var answers_to_questions = "false";
            return false;
        }else{
            var answers_to_questions = "true";
            jQuery("#no_answers").html('');
        }
        //alert((group.filter(":checked").length)?"checked":"not checked");
    }
});

I get the alert so I know it's getting there, however, the radio button is not being checked. When I remove this code however, it works fine. Any ideas why this would cause this to happen?

Thanks in advance!

Upvotes: 2

Views: 761

Answers (2)

Ram
Ram

Reputation: 144739

Try the following:

$("input[type=radio]").click(function(event){
    var num_questions = parseInt($("#num_questions").val(), 10) + 1;
    var unselected = 0;
    for(var i = 1; i < new_questions; i++) {
        if ($('input[name=rating_value_'+i+']:checked').length == 0 ) {
             unselected++
        }
    }
    $("#no_answers").html('there are ' + unselected + ' radio groups');
});

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150080

Returning false from an event handler prevents the default action for that event from occurring. In the case of a click on a radio button the default action is to select that radio button (and deselect the previously selected one in its group).

"when a radio button is clicked to see if there is at least one entry in the group(s) choosen"

I can't understand what you're trying to achieve here. "at least one" doesn't make sense since only one radio at most can be checked in a given group. Less than one in a group can happen only if none were checked initially, because the user can't un-check all radios in a given group.

Having said that, in a general sense your code can be simplified:

jQuery("input[type=radio]").click(function(event){
    var num_questions = jQuery("#num_questions").val(),
        new_questions = parseInt(num_questions, 10) + 1,
        radios = jQuery("input[type=radio]"),
        all_answered = true;
    for(var i=1; i<new_questions; i++){
        if(radios.filter('[name=rating_value_'+i+']:checked').length===0){
            all_answered = false;
            break;
            // return false;   <------ don't return false or it cancels the click
        }
    }
    if (!all_answered) {
        // a group was found that didn't have an answer selected
        // so do something
    } else
        jQuery("#no_answers").html('');
});

Upvotes: 2

Related Questions