I have a form, which contains 5 tables.
Each table has the same headers <th> as the others.
Three tables have checkboxes, the others have radio buttons in each <td>.
I have a piece of Javascript for each table, which changes the background colour of the selected items.
What I am looking to do though, is find a way so that if the box in the first table is selected, it marks all the corresponding fields in the other tables as disabled (and available again when the first table is unticked).
What would be a good way to go about this?
example of my tables:
Code: Select all
<form name="DBReturn" action="config.dbUpdate.php" method="post" class="center" onSubmit="return ValidateDBSelect()">
DATABASES TO BE IGNORED
<table id="DBSelectIgnTable" class="DBSelectTable">
<tr>
<th class="CellGrey RoundTopLeft">DB1</td>
<th class="CellGrey ">DB2</td>
. . .
</tr>
<tr>
<td class="CellWhite RoundBottomLeft"><INPUT TYPE="checkbox" NAME="ignore[]" VALUE="1"></td>
<td class="CellWhite "><INPUT TYPE="checkbox" NAME="ignore[]" VALUE="2"></td>
. . .
</tr>
</table>
TABLE NUMBER 2
<table id="SlaveDBs" class="DBSelectTable">
<tr>
<th class="CellGrey RoundTopLeft">DB1</td>
<th class="CellGrey ">DB2</td>
. . .
</tr>
<tr>
<td class="CellWhite RoundBottomLeft"><INPUT TYPE="checkbox" NAME="slave[]" VALUE="1"></td>
<td class="CellGreen"><INPUT TYPE="checkbox" NAME="slave[]" VALUE=2 checked></td>
. . .
</tr>
</table>
TABLE NUMBER 3
<table id="Set3DBs" class="DBSelectTable">
<tr>
<th class="CellGrey RoundTopLeft">DB1</td>
<th class="CellGrey ">DB2</td>
. . .
</tr>
<tr id="Tab3a">
<td><INPUT TYPE="radio" NAME="group2" VALUE="1"></td>
<td><INPUT TYPE="radio" NAME="group2" VALUE="2"></td>
. . .
</tr>
<tr id="tab3b">
<td class="RoundBottomLeft"><INPUT TYPE="radio" NAME="group3" VALUE="1"></td>
<td><INPUT TYPE="radio" NAME="group3" VALUE="2"></td>
. . .
</tr>
</table>
. . .
TABLE 4
TABLE 5
<p class="submit" id="submitConfirm"><input type="submit" Name='submit' value="Confirm Selection"/></p>
</form>
Code: Select all
//CHANGE COLOUR OF BACKGROUND ON IGNORE DB's
$(document).ready(function()
{
$("#DBSelectIgnTable").on('click','input:checkbox',function()
{
if ($(this).attr('checked'))
{
$(this).closest('td').removeClass('CellWhite').addClass('CellRed');
} else {
$(this).closest('td').removeClass('CellRed').addClass('CellWhite');
};
}
)
}
);
//CHANGE COLOUR OF RADIO BUTTONS ON SLAVE DB's
$(document).ready(function()
{
$('#SlaveDBs td').change(function()
{
$('#SlaveDBs td').removeClass('CellGreen');
$(this).addClass('CellGreen');
}
);
}
);