选中复选框时禁用选择

Question

I am working on a large product and for the life of me I cannot get this to work. My problem, is that the id of the checkboxes and the drop-down boxes are dynamic so I simply cannot reference them and I cannot edit the html to give them another. I can however, contain them in a Div and give that a class name to reference them (div.blaaah select).

I have been trying to research and write some JS to disable the drop-down boxes when a checkbox is selected but with the referencing issues I cannot do it.

Also I want this to apply many many areas on the page (around 65 checkboxes disable corresponding pairs of drop-down boxes) - for example:

as each div containg a drop-down box is the next element after the div containing the checkbox to disable it I thought I could use .next() or something but my skills with Js just arent up to scratch!

I have attempted a host of things but the generel idea I am going for is along the lines of the following shambles of an attempt:

$(".NACheck input").click(function() {
$(this).next(".importSelect select").disabled=true;
});

This is the heirachy of the elements:

<td>
  <div>
    <div class="checkNA">
      <table>
        <tbody>
          <tr>
            <td>
              <span>
                <table>
                  <tbody>
                    <tr>
                      <td>
                        <INPUT: CHECKBOX />
                      </td>
                      <td>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</td>
<td>
  <div>
    <div class="importSelect">
      <table>
        <tbody>
          <tr>
            <td>
              <span>
                <SELECT />
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</td>
<td>
  <div>
    <div class="RelSelect">
      <table>
        <tbody>
          <tr>
            <td>
              <span>
                <SELECT />
              <span>
            </td>
          </tr>
        <tbody>
      </table>
    </div>
  </div>
</td>    

Any help would be much appreciated! Thank you.

Answer 1

Try this :

$(".NACheck input").click(function() {
    $('select', $(this).parents('.container-of-each-line')).attr('disabled', 'disabled');
});

Answer 2

Assuming your select boxs are next two elements after checkbox

add onchange or onclick event to each checkbox as

this.nextSibling.disabled = this.checked;
this.nextSibling.nextSibling.disabled = this.checked;

Answer 3

May be this can help:

$(this).parents('div containing checkbox').next().children().attr("disabled", true);

check this out http://jsfiddle.net/ZBymu/