Question

I have a generated table that contains multiple rows with each row containing a leading td with a checkbox and another td with a select list =

<div class="table">
<table width="100%" class="tframe" id="table0">
<thead>
<tr class="trheadline">
    <th>Selection</th>
    <th>Repository-Tag</th>
</tr>
</thead>
<tbody>
<tr class="trow">
    <td>
        <input type="checkbox"
          value="0#298#abk_testn#l#CLEARCASE#at_web_vob"
          name="module">ModuleA
    </td>
    <td>
    <select name="cvstags">
        <option value="no_Repository">no_Repository</option>
        <option value="220607_143102110">220607_143102110</option>
        <option value="220607_09410236">220607_09410236</option>
        <option value="220507_091903814">220507_091903814</option>
    </select>
    </td>
</tr>
<tr class="trow">
    <td>
        <input type="checkbox"
          value="1#299#abk_integration#d#CLEARCASE#at_web_vob"
          name="module">ModuleB
    </td>
    <td>
    <select name="cvstags">
        <option value="220607_143102110">220607_143102110</option>
     </select>
    </td>
 </tr>
 <tr class="trow">
     <td>
        <input type="checkbox"
          value="2#301#abk_statcont##CLEARCASE#at_web_vob"
          name="module">ModuleC
    </td>
    <td>
    <select name="cvstags">
        <option value="no_Repository">no_Repository</option>
        <option value="220607_143102110">220607_143102110</option>
        <option value="220607_09410236">220607_09410236</option>
        <option value="220507_091903814">220507_091903814</option>
    </select>
        </td>
    </tr>
    </tbody>
 </table>
</div>

Now I want to pin a change event upon the select, but I want an action only to get started, if the leading checkbox is checked, for now I have =

<script>
    $('select').change(function(){
        alert($(this).val());
    });
</script>

which gives me the value of the selected option, fine but two problem remain =

1. how to check whether the leading checkbox in the same tr is checked ?

   $('select').change(function(){
    if (the leading checkbox is checked) {
       run my action..
    }
   });
   

2. the change event doesn’t work if the select list has only
   one option as in the second row of my example above, how
   to achieve a similar behaviour as with change event for that case ?

Thanks for any hints !!

Answer 1

How about looking at this the other way around i.e. handle the click event on the checkbox and if checked, assess the value of the select in the row?

$('tr.trow input:checkbox').click(function() {
    if (this.checked) {
        var self = $(this);
        self.parent().parent().find('select').val(); // value of select
    }
}

EDIT:

Here’s how I would roughly handle it:

// use an object literal to prevent global pollution(!)
var rowActions = {
    checkbox: function() {
       if (this.checked) {
           rowActions.doSomething();
       }
    },
    select: function() {
       if ($(this).parent().parent().find('input:checkbox:checked').length) {
           rowActions.doSomething();
       }
    },
    doSomething: function() {
        alert('I did something!');
    }
}

$('tr.trow').each(function() {
    var self = $(this);
    self.find('input:checkbox').click(rowActions.checkbox);
    self.find('select').change(rowActions.select);
});

and here’s a Working Demo to show it in action. add /edit to the url to play with the code.