current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote -5 down vote favorite

I need your help,

Is there a way one can possible use the all so powerful jQuery to validate the following conditions before enabling button?

  1. If the user inputs a value in the text box and then checks one of the checkboxes, then enable the button

  2. If the user already has a value present in the text, and then checks one of the checkboxes, then enable the button

How can this be written in jQuery, from my perspective this would some lenghty form field checking no?

Here's the HTML markup:

<!DOCTYPE html>

<html>
  <head>
  </head>
  <body>
    <input type="button" value="Add To Calendar" disabled>
    <br>
    <input type="checkbox" name="dategroup"><input type="text" id="date1">
    <br>
    <input type="checkbox" name="dategroup"><input type="text" id="date2">
    <br>
    <input type="checkbox" name="dategroup"><input type="text" id="date3">
  </body>
</html>
share|improve this question
    
what have you tried so far – user2950720 Jun 7 at 17:58
1  
Yes, jQuery - as well as plain JavaScript - can definitely do this. Where did you get stuck, how far did you get, what went wrong, how did it "go wrong"? – David Thomas Jun 7 at 17:58
up vote 0 down vote accepted

This might get you started. You can make the field validation as complex or simple as you wish.

$('input[type=checkbox]').click(function(){
   var tmp = $(this).next('input').val();
   //validate tmp, for example:
   if (tmp.length > 1){
     //alert('Text field has a value');
     $('#mybutt').prop('disabled',false);
   }else{ 
     //alert('Please provide a long value in text field');
     $('#mybutt').prop('disabled', true);
     $(this).prop('checked',false);
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <input id="mybutt" type="button" value="Add To Calendar" disabled>
    <br>
    <input type="checkbox" name="dategroup"><input type="text" id="date1">
    <br>
    <input type="checkbox" name="dategroup"><input type="text" id="date2">
    <br>
    <input type="checkbox" name="dategroup"><input type="text" id="date3">

share|improve this answer
    
why all the downvotes? o.O. Oh ... I see... the odd id ... – mmcrae Jun 7 at 19:48
    
@mmcrae No, I don't think that's it... I use that ID in examples and it usually goes over with a grin. Suspect it's because I answered a question where OP hadn't tried anything himself. I don't care about that, though, because I was there once myself and remember it well. – gibberish Jun 7 at 20:13
up vote 0 down vote

Try this way..

$('input').on('change input', function() {
  $input = $('input');
  $button = $('input[type="button"]');
  var arr = [];
  $input.each(function() {
    if ($(this).attr('type') !== 'button') {
      arr.push(check($(this)));
      arr.indexOf(false) == -1 ? $button.removeAttr('disabled') : $button.attr('disabled', 'disabled');
    }
  })
})

function check(elem) {
  if ($(elem).attr('type') == 'checkbox' && $(elem).is(':checked')) return true;
  if ($(elem).attr('type') == 'text' && $(elem).val().trim().length) return true;
  return false;
}


$('input').on('change input', function() {
  $input = $('input');
  $button = $('input[type="button"]');
  var arr = [];
  $input.each(function() {
    if ($(this).attr('type') !== 'button') {
      arr.push(check($(this)));
      arr.indexOf(false) == -1 ? $button.removeAttr('disabled') : $button.attr('disabled', 'disabled');
    }
  })
})

function check(elem) {
  if ($(elem).attr('type') == 'checkbox' && $(elem).is(':checked')) return true;
  if ($(elem).attr('type') == 'text' && $(elem).val().trim().length) return true;
  return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Add To Calendar" disabled>
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date1">
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date2">
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date3">

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.