Hiding element with jquery

Question

Can someone tell me if this jquery code makes sense. I have it wrapped in a document ready block. I am trying to hide an element if the set of conditions are true, but when I click on the submit button, knowing that one of the checkboxes is indeed checked, the element appears instead of being hidden. Is there anything obvious that I am missing with the below code:

            $('#submit').on('click', function() {
            if ($('#Option1').not(':checked') &&
            $('#Option2').not(':checked') &&
            $('#Option3').not(':checked') &&
            $('#Option4').not(':checked') &&
            $('#Option5').not(':checked')) {
                $("form").submit(function () {
                    return false;
                });
                $('#selectOption').show();
            } else {
                $('#selectOption').hide();
            }
        });

adeneo · Accepted Answer · 2012-10-30 22:34:20Z

2

There really is no use in hiding or showing anything when the form is submitted, as it will redirect the page anyway. I'd do something like this and check to see if any boxes with an ID starting with Option is checked, and then prevent the click if no boxes are checked etc:

$('#submit').on('click', function(e) {
    if (!$('[id^="Option"]').is(':checked')) {
         e.preventDefault();
         $('#selectOption').show();
    }
});

answered Oct 30, 2012 at 22:34

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Hiding element with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related