I have checkboxes arranged in a table with 23 columns and 7 rows. My goal is to style the checkboxes in a way that hides the check mark when selected. I also want to change the background image of the checkbox to fill it with color when marked. Can someone guide me on how to achieve this using Jquery/Javascript and CSS? I attempted to use a Javascript plugin from I included the Js file in my php page and added the class="styled". However, it doesn't seem to be working as expected.
Below is the code snippet for my checkboxes:
<div id="checkboxes">
<table id="custom-interval-tbl" class="form-layout" cellpadding="0" cellspacing="0">
<?php foreach($days_of_week as $short => $long): ?>
<tr>
<th scope="row"><?echo"<b>".$short."</b>"?></b></th>
<?php for($hour = 0; $hour <= 23; ++$hour): ?>
<td><input type="checkbox" class="styled" name="custom_interval[<?=$short?>][<?=$hour?>]" value="<?=$hour?>" <?=isset($custom_intervals[$short][$hour]) ? 'checked="checked"' : ''?> /></td>
<?php endfor; ?>
</tr>
<?php endforeach; ?>
</table>
</div>
</div>
Are there any adjustments needed in the script provided? Thank you for your input!