如何添加和删除“只读”属性？答案

【问题标题】：How I can add and remove the attribute "readonly"?如何添加和删除“只读”属性？
【发布时间】：2011-01-30 14:04:27
【问题描述】：

$(document).ready(function() {
  //Check City Value
  var city_value = parseInt($("#city").val());
  if( city_value == 0) {
     $("#state").attr("readonly", true);
     //$("#rate").attr("readonly", "readonly");   
  } else {
     $("#state").removeAttr("readonly");
     //document.getElementById("state").removeAttribute("readonly",0);
     //get_states(city_value);
  }
 /***
  //Check State Value
  var state_value = parseInt($('#state').val());
  if( state_value == 0) {
      $('#rate').attr('readonly', true); 
  } else {
     $('#rate').attr('readonly', false);
  }
  ***/
});

这是我的示例代码。

<td><select name="city" id="city">
<option value="0">PLEASE_SELECT_TEXT</option>
<option value="Antalya">Antalya</option>
<option value="Bodrum">Bodrum</option>
<option value="Istanbul">Istanbul</option>
</select>&nbsp;</td>
<td><div id="states"><input type="text" name="state" value="FORCE_FOR_SELECT" readOnly id="state"></div></td>

我还添加了文档类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

【问题讨论】：

您的代码已经这样做了。你能否详细说明一下这个问题？ 实际上会发生什么，什么不会发生？如果可以的话，您能否也以 SSCCE 的风格重新发布它？ sscce.org 不要忘记包含文档类型并说明您尝试过的浏览器。
这不起作用，我真的不知道这个问题。页面上没有 JavaScript 错误，也没有任何操作。输入类型（文本）仍为“只读”...

标签： javascript jquery

【解决方案1】：

您可以使用纯 JavaScript（或 Vanilla JS）无需 jQuery：

设置属性 readOnly:

document.getElementById("state").readOnly = true;

并取消设置：

document.getElementById("state").readOnly = false;

等效到面向对象的表示法也是这个面向数组的表示法：

document.getElementById("state")['readOnly']

同样重要的是，在 JavaScript 中，所有属性都区分大小写，因此请务必记住大号 O在readOnly 属性中，否则它将不起作用...

【讨论】：

【解决方案2】：

是的，我终于找到了解决方案。我用过onChange函数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
//$(document).ready(function() {
function check_city(city_value) {
  //Check City Value
  city_value = $("#city").val();
  if( city_value == "0") {
     $("#state").attr("readonly", true);
     //$("#rate").attr("readonly", "readonly");   
  } else {
     $("#state").attr("readonly", false);
     //$("#state").removeAttr("readonly");
     //document.getElementById("state").removeAttribute("readonly",0);
     //get_states(city_value);
  }
 /***
  //Check State Value
  var state_value = parseInt($('#state').val());
  if( state_value == 0) {
      $('#rate').attr('readonly', true); 
  } else {
     $('#rate').attr('readonly', false);
  }
  ***/
//});
}
</script>

<td><select name="city" id="city" onChange="check_city(this.value)">
<option selected value="0">PLEASE_SELECT_TEXT</option>
<option value="Antalya">Antalya</option>
<option value="Bodrum">Bodrum</option>
<option value="Istanbul">Istanbul</option>
</select>&nbsp;</td>
<td><div id="states"><input type="text" name="state" value="FORCE_FOR_SELECT" readonly id="state"></div></td>

【讨论】：

【解决方案3】：

在我拥有的所有主要浏览器中都可以正常工作。这是SSCCE：

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2496443</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#toggle').click(function() {
                    $('#foo').attr('readonly', !$('#foo').attr('readonly'));
                });
            });
        </script>
        <style>
            input[readonly] { 
                background: lightgray;
            }
        </style>
    </head>
    <body>
        <input id="foo">
        <button id="toggle">toggle readonly</button>
    </body>
</html>

切换它会将背景变为灰色（尽管并非所有浏览器都这样做）并且输入是不可编辑的（这在所有网络浏览器中都是一致的）。所以你的问题出在其他地方。您可能正在使用糟糕的doctype，也可能与糟糕的网络浏览器结合使用。

【讨论】：

【解决方案4】：

readonly 属性采用布尔值，而readonly 属性采用字符串值。您应该使用已注释掉的代码：

$("#rate").attr("readonly", "readonly");

【讨论】：

jQuery 足够聪明，可以为您翻译。这同样适用于checked 等等。
不管 jQuery，这也取决于所使用的文档类型。在 XHTML 中您需要指定属性值，而在 HTML 中您不需要指定任何值。