Question

我尝试通过单击一个按钮启用/禁用具有相同ID的列中文本框的只读属性，但我的代码似乎不起作用。我还不熟悉PHP的工作原理

PHP中的

代码：

<input type='text' name='nTotal[$i]' value='$row->Total' size='5'  readonly='true' id='ntotal[$i]'>

javascript中的代码：

var a = document.getElementById(ntotal); //ntotal[$i] is the ID name of textbox in PHP
for (var i=0;i<a.length;i++){            

 if (a[i].readonly == 'false' ) {
        a[i].readonly = 'true';
         }

 else if(a[i].readonly == 'true'){ 
        a[i].readonly = 'false';
          }
    }
}

任何人都可以给我一个暗示它为什么不起作用的提示？我尝试使用名称而不是ID但结果相同。

Answer 1

尝试：

var arr = document.querySelectorAll('[id="'+ntotal+'"]');   
for(var i=0;i<arr.length;i++){
    if(arr[i].getAttribute('readonly')=='readonly')
        arr[i].removeAttribute('readonly');
    else
        arr[i].setAttribute('readonly', 'readonly');
}

Answer 2

正如其他人所提到的，你应该使用类和getElementsByClassName而不是getElementById，因为后者最多只会返回一个元素，基于ids是唯一的规范。此外，readOnly（区分大小写，带有大写O）属性是布尔值，因此将其与字符串进行比较将不起作用。

var a = document.getElementsByClassName(ntotal);
for (var i=0;i<a.length;i++) {
    a[i].readOnly = !a[i].readOnly;
}

您应该使用属性而不是像其他答案所暗示的那样使用属性。更加温和，更可预测。 readonly属性是布尔值，因此单独存在是重要的，而不是值。

Answer 3

尝试修复命名约定（ID必须是唯一的，而不仅仅是数字），并使用getAttribute，setAttribute和remov eAttribute函数。

<input type='text' name='nTotal' value='1' size='5' readonly='readonly' id='text_1'> 
<input type='text' name='nTotal' value='2' size='5' id='text_2'>

var a = document.getElementsByName("nTotal");
for (var i=0;i<a.length;i++){
   isreadonly = a[i].getAttribute("readonly");
    if (isreadonly) {
      a[i].removeAttribute("readonly");                
    }
    else
    {
      a[i].setAttribute("readonly", "true");        
    }
}

只需在http://jsfiddle.net/wXbzq/

设置工作演示

甚至更好，使用jQuery（http://jquery.com）...你会喜欢它！

在jQuery中禁用：

$('nTotal').removeAttr('readonly');

在jQuery中启用：

$('nTotal').attr('readonly', true);

只读取具有相同ID的所有文本字段

3 个答案: