views:

56

answers:

4

Hi, 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.

A: 

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?

Jacques
Thanks for the reply jacques. I am using plain Javascript. How could I get the textbox names which are in the same row? any suggestions...
Rajkumar
A: 

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', '');
   }
});`
rajasaur
no valid xhtml ... should state `.attr('disabled', 'disabled')` according to http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1
Andreas Niedermair
-, this will do the following: check if the row has an attribute `checked` and then proper set/remove the attribute `disabled` on the cell
Andreas Niedermair
If thats the reason for the downvote, I dont see why the following is given as an example in the same location.<INPUT disabled name="fred" value="stone">
rajasaur
sorry ... wrong link ... there you go: http://webdesign.about.com/od/htmltags/p/blatdisabled.htm, http://www.w3schools.com/Xhtml/xhtml_syntax.asp
Andreas Niedermair
and nope, that is not the reason for the downvote. i've explained why i downvoted: your example won't work, due it will check against the `checkbox` attribute on row and set `disabled` attribute on cell.
Andreas Niedermair
Thanks, I should have checked before submitting.
rajasaur
A: 

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.

eje211
yeah ... valid xhtml!!
Andreas Niedermair
btw ... you will get script-errors with that: `.children('input[type='text']')` - it should state `.children('input[type="text"]')`
Andreas Niedermair
+1  A: 

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!

Andreas Niedermair