Stack Exchange
bootstrap jQuery html5 complex validation code for checkbox and text box
I would like to implement jQuery validate code to make sure user check at least one check box. When the check box got checked, user need to enter value in the matching input text box. 
<form id="demo" class="m-t" role="form" method="post" action="register.php">
 <label class="checkbox-inline">
 <input type="checkbox" id="is_a1" name="is_a1" value="1">a1</label> 

 <label class="checkbox-inline">
 <input type="checkbox" id="is_a2" name="is_a2" value="1">a2</label>

 <label class="checkbox-inline">
 <input type="checkbox" id="is_a3" name="is_a3" value="1">a3</label>
 <input type="text" name="a1_input" id="a1_input" value="">
 <input type="text" name="a2_input" id="a2_input" value="">
 <input type="text" name="a3_input" id="a3_input" value="">
 <button type="submit" class="btn btn-default block full-width m-b">submit</button>

 </form>
 <script>
 $(document).ready(function () {
    $("#demo").submit(function(event) {
      if ($("#a1").is(':checked')){
          if ($("#a1_input).val().length > 0) {
              return true;
          }
          else {
             alert("a1_input is empty");
             return false;
          }
      }
      if ($("#a2").is(':checked')){
         if ($("#a2_input).val().length > 0) {
              return true;
          }
          else {
             alert("a2_input is empty");
             return false;
          }
      }
      if ($("#a3").is(':checked')){
          if ($("#a3_input).val().length > 0) {
              return true;
          }
          else {
             alert("a3_input is empty");
             return false;
          }
      } 
      alert("please check at least one check box");

    });

  });
 </script>


@CK8 what do you mean by complex validation code???

Just iterate through the checkboxes, and check the checked property:
$('#demo .btn').on('click', function () {
    var checked = [];
    $('#demo input[type="checkbox"]').each(function (idx, obj) {
        if ($(this).prop("checked") === true) {
            var parts = $(this).attr('name').split("_");
            checked.push(parts[1]);
        }
    });
    if (checked.length > 0) {
        $.each(checked, function (idx, val) {
            if ($('#' + val + '_input').val() === "") {
                alert(val + ' checked but no input');
            }
        });
    } else {
        alert('nothing checked');
    }
});

https://jsfiddle.net/mkkmvrj3/2/

Check box code work thanks. How about checking the matching input text box and make sure it is not empty?

Here is your solution , for time being I changed a tag id from is_a1 to a1 . Working demo : https://jsfiddle.net/mgfzhbt4/1/
$('input[type="text"]').prop('disabled',true);
$('input[type="checkbox"]').change(function(){
    if($(this).is(':checked'))
  {
    var id = $(this).attr('id');
    alert($(this).attr('id'));
    $('#'+id+'_input').prop('disabled',false);
  }else
  {
    var id = $(this).attr('id');
    $('#'+id+'_input').html('');
    $('#'+id+'_input').prop('disabled',true);
  }
})

$('#submitBtn').click(function(e){
  if(!$('textbox').is(':disabled'))
  {
    if($(this).val().length == 0)
    {
      alert('Field empty');
    e.preventDefault();
    }

  }
})


when I check a1 and enter something in the first text box and click submit button and nothing got submitted.

That was not your question , what you needed I answered

The validation is pure client side code. I just check again on your demo after I checked the first checkbox and input something on the first text box, I am still getting the Field empty alert message.
