如何添加和删除属性“readonly”？

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

Here is my sample codes.

这是我的示例代码。

<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>

I've also added doctype:

我还添加了doctype：

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

4 个解决方案

#1

Yes, finally I've found the solution. I've used onChange function.

是的，最后我找到了解决方案。我用过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>

#2

Works fine here in all major browsers I have. Here's an SSCCE:

在我拥有的所有主流浏览器中都能正常工作。这是一个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>

Toggling it turns the background gray (although not all browsers do that) and the input is uneditable (this is consistent among all webbrowsers). So your problem lies somewhere else. You're probably using a poor doctype and possibly also in combination with a poor webbrowser.

切换它会使背景变为灰色（虽然并非所有浏览器都这样做）并且输入是不可编辑的（这在所有webbrowsers中都是一致的）。所以你的问题就在别的地方。您可能使用的是较差的doctype，也可能与较差的webbrowser结合使用。

#3

While the readonly property takes a boolean value, the readonly attribute takes a string value. You should use the code that you have commented out:

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

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

#4

You can do it in pure JS (or Vanilla JS) without jQuery:

你可以在没有jQuery的纯JS（或Vanilla JS）中完成它：

Set attribute readOnly:

设置属性readOnly：

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

and unset:

并且未设置：

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

#1