title: JQuery: Want to Select Only 3 Checkboxes at a time and I want them to also Enable/Disable a input box
body: <p>I have this sort of working:</p>
  
  <p>Basically, I want to Have 6 checkboxes and 6 inputs, and when you click on a checkbox, it will then enable the input to allow the user to enter data. And when you uncheck the checkbox, it will disable the input field. Also, I only want 3 to be selected, the rest will be disabled.</p>
  
  <pre><code>&lt;div class="span5 lengthcontainer"&gt;
                      &lt;label class="control-label"&gt;Lengths:&lt;/label&gt;
                      &lt;div class="row day-selection"&gt;
  
                          &lt;input name="" type="checkbox" value="" class="LCheckbox" &gt;
                          &lt;label&gt;:05&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/label&gt;
                          &lt;input name="textinput" type="text" class="input-mini-length LInput" disabled&gt;
  
                          &lt;input name="" type="checkbox" value="" class="LCheckbox"&gt;
                          &lt;label&gt;:10&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/label&gt;
                          &lt;input id="10Input" name="textinput" type="text" class="input-mini-length LInput" disabled&gt;
  
                          &lt;input name="" type="checkbox" value="" class="LCheckbox" &gt;
                          &lt;label&gt;:15&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/label&gt;
                          &lt;input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled&gt;
                      &lt;/div&gt;
                      &lt;div class="row day-selection"&gt;
                                              &lt;input name="" type="checkbox" value="" class="LCheckbox" &gt;
                          &lt;label&gt;:30&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/label&gt;
                          &lt;input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled&gt;
  
                          &lt;input name="" type="checkbox" value="" class="LCheckbox" &gt;
                          &lt;label&gt;:60&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/label&gt;
                          &lt;input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled&gt;
  
                          &lt;input name="" type="checkbox" value="" class="LCheckbox"&gt;
                          &lt;label&gt;:60+&lt;/label&gt;
                          &lt;input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
   //Enables only 3 at a time for Unit Lengths section in the advertiser wizard
  $(document).ready(function () { 
  $('.LCheckbox').click(function(){
  if($('input.LCheckbox').filter(':checked').length == 3)
      $('input.LCheckbox:not(:checked)').attr('disabled', 'disabled');
  else
      $('input.LCheckbox').removeAttr('disabled');
   });
   });
  
  $(document).ready(function () {
  $('.LCheckbox').change(function(){
  if ($('input.LCheckbox').is(':checked') == true){
    $(this).nextAll(".LInput:first").prop('disabled', false);
      } else {
      $(this).nextAll(".LInput:first").val("").prop('disabled', true);
  
      }
   });
  });
  </code></pre>