Question

I have four div with class name .s-list. When the user clicks on any of those divs .selected class is applied on the div.

What I am trying to do is while clicking on a button, check all those divs and if any one of them has a class .selected submit a form, else if none of the div has a class .selected show a error message.

The problem:
It works for the first time, but again if I click the button it shows the error message and submit the form when the div already has the class selected.

$("#pp-btn").click(function() {

    $(".s-list").each(function (i) {
         if(!$(this).hasClass('selected')) 
         { 
            $("#p-msg").show(); 
         } 
         else { 

            $("#plans-form").attr('action', $(this).attr('links'));

            $("#p-msg").hide();
         }
        });  
    });

I don’t want the message to be displayed if any 1 of the div has class ‘selected’.

Help please…

Answer 1

Use a jQuery selector to check if any s-list element has a selected class;

$('#pp-btn').click(function (e) {

    if ($('.s-list.selected').length == 0) {
        /* No `selected` class on any `s-list` */
        $('#p-msg').show();
    } else {
        /* At least one `s-list` has the additional `selected` class */
        $('#plans-form').attr('action', $('.s-list.selected').attr('links'));
    }

});