CODEWITHSUNDEEP
jquerybutton
422
422

Reputation: 5770

disable form submit until (two) checkboxes are checked

We have a form and before form can be sumbitted we have two checkboxes.

  1. privacy
  2. terms and conditions.

What I want to do, is ( having trouble validating with checkboxes ) is to disable submit button until both checkboxes have been checked.

the html for these is:

<label class="s_radio"><input type="checkbox" class="required" id="terms"/> <a class="s_main_color" href="/terms">Terms</a></label>
<label class="s_radio"><input type="checkbox" class="required" id="privacy"/> <a class="s_main_color" href="/privacy">Privacy Policy</a></label>

The js for validation for these ( not working though is )

if(terms == "") $('#terms').css({"outline-color":"#F12B63"});
if(privacy == "") $('#privacy').css({"outline-color":"#F12B63"});

Upvotes: 3

Views: 3350

Answers (2)

Dan A.
Dan A.

Reputation: 2924

Jesse has a good solution. For a slightly more concise solution that avoids duplication (you know, in case someone goes crazy and decides to add more checkboxes), you could do this:

$(function() {
    $('input.required').click(function() {
        var unchecked = $('input.required:not(:checked)').length;
        if (unchecked == 0) {
            $('#submitBtn').removeAttr('disabled');
        }
        else {
            $('#submitBtn').attr('disabled', 'disabled');
        }
    });
});

Upvotes: 9

Jesse Pollak
Jesse Pollak

Reputation: 1600

Try this out:

HTML

<label class="s_radio"><input type="checkbox" class="required" id="terms"/> <a class="s_main_color" href="/terms">Terms</a></label>

<label class="s_radio"><input type="checkbox" class="required" id="privacy"/> <a class="s_main_color" href="/privacy">Privacy Policy</a></label>

Javascript

$(document).ready(function(){
 $('input[type="submit"]').attr('disabled','disabled');
 $("#privacy").click( function(){
    if( $(this).is(':checked') && $("#terms").is(':checked') ) {
            $('input[type="submit"]').removeAttr('disabled');
         } else {
            $('input[type="submit"]').attr('disabled','disabled');
         }
    });
 $("#terms").click( function(){
    if( $(this).is(':checked') && $("#privacy").is(':checked') ) {
            $('input[type="submit"]').removeAttr('disabled');
         } else {
            $('input[type="submit"]').attr('disabled','disabled');
         }
    });
 });

I can't promise that it's perfect, but I'm pretty sure that should work—if not, it definitely will put you on the right track.

Hope this helps!

EDIT:

For the user's specific button:

 <button class="s_button_1 s_main_color_bgr" id="buttonsend" name="submit" value="submit" disabled="disabled"><span class="s_text">Create Account</span></button>

$(document).ready(function(){
 $("#privacy").click( function(){
    if( $(this).is(':checked') && $("#terms").is(':checked') ) {
           $('#buttonsend').removeAttr('disabled');
    } else {
        $('#buttonsend').attr('disabled','disabled');
    }
    });
 $("#terms").click( function(){
    if( $(this).is(':checked') && $("#privacy").is(':checked') ) {
          $('#buttonsend').removeAttr('disabled');
       } else {
          $('#buttonsend').attr('disabled','disabled');
     }
    });
  });

Upvotes: 2

Related Questions