将复选框值和输入值合并到一个跨度文本区域

Question

I have the following code:

I basically want it, where if they check a checkbox and then fill out the input on any of them, I want to update a span text with text when they hit a save button:

Example :05| 33%, :15| 33%, :60| 34% :05| 33%, :15| 33%, :60| 34%

In the example above, the user checked the :05, :15, and :60 checkboxes and only entered those numbers.

<div class="span5 lengthcontainer">
        <label class="control-label">Lengths:</label>
        <div class="row day-selection">
          <input name="" type="checkbox" value=":05" class="LCheckbox" id="05Checkbox" >
          <label>:05&nbsp;&nbsp;&nbsp;</label>
          <input name="textinput" type="text" class="input-mini-length LInput" disabled>
          <span>%</span>
          <input name="" type="checkbox" value=":10" class="LCheckbox">
          <label>:10&nbsp;&nbsp;&nbsp;</label>
          <input id="10Input" name="textinput" type="text" class="input-mini-length LInput" disabled>
          <span>%</span>
          <input name="" type="checkbox" value=":15" class="LCheckbox" >
          <label>:15&nbsp;&nbsp;&nbsp;</label>
          <input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled>
          <span>%</span> </div>
        <div class="row day-selection">
          <input name="" type="checkbox" value=":30" class="LCheckbox" >
          <label>:30&nbsp;&nbsp;&nbsp;</label>
          <input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled>
          <span>%</span>
          <input name="" type="checkbox" value=":60" class="LCheckbox" >
          <label>:60&nbsp;&nbsp;&nbsp;</label>
          <input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled>
          <span>%</span>
          <input name="" type="checkbox" value=":60+" class="LCheckbox">
          <label>:60+</label>
          <input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled>
          <span>%</span> </div>
      </div>

Sorry: Here is the jquery I used to get the checkbox values, and this works. Just not sure how to include the input:text fields to it.

var tempLengthValue='';
tempLengthValue=$('.lengthcontainer  input:checkbox').map(function(n){
    if(this.checked){
        return  this.value;
        }
        ;}).get().join(' , ');
 $('#Length-lbl').html(tempLengthValue);

Answer 1

In short:

//Enable the textbox
$(":checkbox").change(function() {
    $(this).nextUntil(":text").prop("disabled", !this.checked);
});

$(":text").change(function() {
    var radio = $(this).prevUntil(":checkbox").val();
    $(this).next("span").text(radio + "| " + $(this).text());
});

(Untested)

Answer 2

Answered it, this is for anyone who needs this kind of answer:

var tempLengthValue='';
tempLengthValue=$('.lengthcontainer  input:checkbox').map(function(n){
    if(this.checked){
        return  this.value + ' @ ' + $(this).parent().children('input:text').val() +    '%';
        }
        ;}).get().join(' , ');