Refine jQuery selection & Javascript action

Question

I have this jQuery in my Visualforce page that adds some styling and updates the value of a pick list field in the row when a selectCheckbox is checked.

<script type="text/javascript">  
  j$ = jQuery.noConflict();
  j$(document).ready(function() {
      j$('.checkBox').click(function () {          
          j$('.inputStatus').val('Completed')
          j$(this).closest('tr').addClass("selected");
      });
  });        
</script> 

The value gets updated, but for all the rows in the table instead of just the row that is currently selected. How can I limit it?

Also, how can I add a quick save action to that select checkbox as well?

Here is the VF page..

   <apex:page>
 <style>

.selected { text-decoration: line-through; color: #BA3838;

j$ = jQuery.noConflict(); j$(document).ready(function() { j$('.checkBox').click(function () {
j$('.inputStatus').val('Completed') j$(this).closest('tr').addClass("selected"); }); });

<table id="tableId" class="table table-condensed table-bordered table-hover table-responsive">
        <thead>
            <tr>
                <th></th>
                <th>Type </th>
                <th>Customer</th>
                <th>Subject</th>
                <th>Notes</th>
                <th>Status</th>
                <th>Deadline</th>
            </tr>
        </thead>
        <tbody> 

       <apex:outputPanel >
          <apex:repeat value="{!List}" var="lst">

                <tr >
                    <td>
                    <apex:selectCheckboxes styleClass="checkBox" > </apex:selectCheckboxes>
                   </td>
                    <td>{!lst.Type__c}</td>
                    <td>{!lst.Customer__c}</td>
                    <td>{!lst.Subject__c}</td>
                    <td>{!lstNotes__c} </td>
                    <td><apex:inputField styleClass="inputStatus" value="{!lst.Status__c}" />  </td>

                    <td width="80"><apex:outputText value="{0, date, MMM'-' d'-'yyyy}">
                        <apex:param value="{!lst.Deadline__c}" /> 
                        </apex:outputText>
                    </td>
                </tr>
            </apex:repeat>
           </apex:outputPanel>
        </tbody>
    </table>
</apex:form>
</apex:page

Answer 1

Try changing

j$('.inputStatus').val('Completed')

To

j$(this).closest('tr').find('.inputStatus').val('Completed');

This isn't the most efficient approach - you'd be better off using an ID to identify the specific apex:inputField element - but it should work as a starting point.