0

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:

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.

Improve this question
4
  • I am a fan of using <table> when needs must, but that is just an amazingly over complicated use of formatting! Commented Sep 20, 2013 at 11:40
  • This is not my work but also, the product is an insanely complicated system, in essence it is a huuuge cms system and I am editing it customer side to make it do what they want Commented Sep 20, 2013 at 11:44
  • Tables are used for practicality in this case and not for lazy formatting [= Commented Sep 20, 2013 at 11:44
  • 1
    I'll have to take your word for it @Phil, because it's horrible in it's current state! Good luck :-) Commented Sep 20, 2013 at 11:45

3 Answers 3

Reset to default
0

Try this :

$(".NACheck input").click(function() { $('select', $(this).parents('.container-of-each-line')).attr('disabled', 'disabled'); });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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;
Improve this answer

Comments

0

May be this can help:

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

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

Improve this answer

7 Comments

I have just added the heriachy in the html to bottom of my question as I didnt really make it very clear
can you give unique ids to each and every checkbox and corresponding two select boxes?
$('.checkNA :checkbox').click(function() { $(".importSelect select").attr("disabled", true); $(".RelSelect select").attr("disabled", true); }); here is the fiddle: jsfiddle.net/yvG9F
Unfortunately not, then life would be too easy. I can only add a unique ID to a div that contains the check/drops
then give dynamic id to the table which contains the whole row of checkbox and two select boxes(say in a for loop like <table id="row-table{somedynamicvalue}">) and then fire onclick event from checkbox passing that table's dynamic id(like disableSelect({somedynamicvalue});). Now, script would be: function disableSelect(dynamicId) { $("#row-table"+dynamicId+" select").attr("disabled", true); } hope it's correct this time!
|