Creating a checkmark-based string in HTML

Question

I have a table in HTML. The contents of this table are dynamically populated. Each row of the table has text fields and one flag. When the page loads, all the text fields in the lines will be in a read-only state.

Now I want to change the state of the text fields in a specific line for editing, if the checkbox in this line is selected. In addition, text fields should be read-only if unchecked.

How can I accomplish this using javascript? Please help me.

Answer 1

stating that this simple javascript will be pure pain :) I suggest using jQuery, for example:

$(':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 verified!

Answer 2

Perhaps you can start by handling the click event from the checkbox with the if / else statement to check if the checkbox is actually set. If you can use the line the checkbox is in to find all the text fields in different cells and enable / disable them.

Are you using jQuery or plain javascript?

Answer 3

jQuery, :

$('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');
  }
})

- . , .

, .

Answer 4

(, "checkbox" ), JQuery.

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