I'm trying to implement a functionality where a textbox becomes disabled and changes its background color when a user unchecks a checkbox. Conversely, if the user checks the checkbox, the textbox should become editable and change its background color to white. Below is the code snippet:
$(document).ready(function () {
$(".ba").click(function () {
$(".tex").css("background-color", "#CCCCCC");
});
});
In this code, .ba represents the checkbox class, and .tex represents the textbox class. Currently, when the user clicks the checkbox, the color changes to grey, but clicking again doesn't revert it back. I want the color to change only when the checkbox is unchecked, making the textbox non-editable. Can anyone assist with this?
I'm also using the following JavaScript function to handle checking all and unchecking all checkboxes:
function checkAll(formname, checktoggle) {
var checkboxes = new Array();
checkboxes = document[formname].getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
Could this be causing any issues in the implementation? Any insights would be appreciated.