There are lots of other ways to do this, the code that I wrote assumed that there was only the one checkbox in the middle of each row, it didn’t consider that there would be one at the beginning of the row.
I would duplicate the handler function (the part that begins with document.on('click', ... and ends with });) and modify the first one a little. This should get you a different behavior if the first checkbox is checked or the second one is.
// listen for the click on the td, not the checkbox
document.on('click', 'td:first-of-type', function(evt, td){
var elm = td.down('input[type="checkbox"]');
if(elm){
td.nextSiblings().map(function (el) {
if (elm.checked) {
el.down('input, select').enable();
} else {
el.down('input, select').disable();
}
});
}
});
// listen for the 8th td in the tr to be clicked
document.on('click', 'td:nth-of-type(8)', function(evt, td){
var elm = td.down('input[type="checkbox"]');
if(elm){
td.nextSiblings().map(function (el) {
if (elm.checked) {
el.down('input, select').enable().show();
} else {
el.down('input, select').disable().hide();
}
});
}
});
Note that this set of functions is predicated on your production layout being EXACTLY the same as your example. I have counted cells from the left, so your table really must be laid out this way, or you must change the function to reference the correct number of cells from the left…
Also, in order to have your inputs on the left set of fields initially in the disabled state, you need to use the same technique you used earlier (the Extended interface) but add a name/value pair of disabled / disabled.
Walter
PS: I have an Action called SemanticTable which can strip all of the P tags out of a drawn-in-place table: SemanticTable - ActionsForge
Thanks walter, I haven’t had time to try that yet.
I have noticed that the code as it stands will only show/hide one item in each cell. If I put a second menu/list in the same cell for example, and do everything the same, it doesn’t show or hide.
Now sometimes I could make a new column, however I would ideally like them in the same cell as they come under the same heading.
It is basically a time drop down, one for hours and one for minutes (00,15,30,45) so ideally should be in the same column
Interestingly in my old Safari 5.1.1 on Snow Leopard it works fine!
Yes there are limitations in Browser support - maybe you should stick to 2 fields as getting full cross browser support is tricky - probably not worth the benefits. As it is an HTML 5 standard support will come - but when?
It may be that using 2 fields will also make any js calculations that you use to add your hour totals will be easier as well.