Making a row editable based on a checkbox in HTML

Question

I have a table in HTML. The contents of this table are dynamically populated. Every row of the table has text boxes and one checkbox. When the page is loaded, all the text boxes in the rows will be in a read-only state.

Now, i want to change the state of the text boxes in a particular row to editable, if the check-box in that row is selected. Also, the text boxes should be made read-only if the check box is de-selected.

How could I accomplish this using Javascript? Please help me.

Answer 1

stating this with plain javascript would be pure pain :) i suggest using jQuery, eg:

$(':checkbox').click(function() {
    var checkbox = $(this);
    var row = checkbox.closest('tr');
    var inputText = $('input[type=text]', row);
    if (checkbox.is(':checked')) {
        inputText.attr('readonly', 'readonly');
    }
    else {
        inputText.removeAttr('readonly');
    }
});

otherwise

function HandleClickOnCheckbox() {
    var checkbox = this;
    var row;
    var iter = checkbox;
    while (!row) {
        iter = iter.parent;
        if (iter == window) {
            break;
        }
        if (iter.tagName == 'tr') {
            row = iter;
            break;
        }
    }
    if (!row) {
        alert('row not found');
        return false;
    }
    var textBoxes = GetTextBoxes(row);
    var method;
    if (checkbox.checked) {
        var disabledAttribute = document.createAttribute('disabled');
        disabledAttribute.nodeValue = 'disabled';
        method = function(textBox) {
            textBox.setAttributeNode(disabledAttribute);
        };
    }
    else {
        method = function(textBox) {
            textBox.removeAttribute('disabled', 0);
        }
    }
    for (var i = 0; i < textBoxes.length; i++) {
        var textBox = textBoxes[i];
        method(textBox);
    }
}
function GetTextBoxes(element) {
    var textBoxes = new Array();
    for (var i = 0; i < element.children.lenght; i++) {
        var child = element.children[i];
        if (child.tagName == 'input') {
            if (child.type == 'text') {
                textBoxes.push(child);
            }
        }
        if (child.tagName == 'td') {
            var childTextBoxes = GetTextBoxes(child);
            if (childTextBoxes.length) {
                for (var j = 0; j < childTextBoxes.length; j++) {
                    var childTextBox = childTextBoxes[j];
                    textBoxes.push(childTextBox);
                }
            }
        }
    }
    return textBoxes;
}

this is not tested!

Answer 2

Perhaps, you can start by handling the click event of the checkbox using an if/else statement to check if the checkbox is actually checked. If it is you can use the row within which the checkbox resides to find all the textboxes in the different cells and enable/disable them.

Are you using JQuery or plain Javascript?

Answer 3

If you don't mind using jQuery, you could do:

$('checkbox').click(function() {
  if ($(this).attr('checked')) {
    $(this).parents('tr').children('input[type="text"]').each().attr('readonly', 'readonly');
  } else {
    $(this).parents('tr').children('input[type="text"]').each().removeAttr('readonly');
  }
})

Or something like that. I'd have to test it to be sure.

Edited to reflect Andreas's comment.

Answer 4

Try this snippet (assumes that the checkbox has a class called "checkbox") if you are using Jquery.

jQuery('tr.checkbox').click(function() {
   if (jQuery(this).is(":checked")) {
      jQuery('td', this).removeAttr('disabled');
   } else {
      jQuery('td', this).attr('disabled', '');
   }
});`