发表新帖
发表新帖

How I can add and remove the attribute “readonly”?

前端 未结
关注
4 1276
灰色年华
灰色年华 2021-02-18 20:19 
$(document).ready(function() {
  //Check City Value
  var city_value = parseInt($(\"#city\").val());
  if( city_value == 0) {
     $(\"#state\").attr(\"readonly\", true)
相关标签:
4条回答
  • 执念已碎
    2021-02-18 20:48

    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:

    $("#rate").attr("readonly", "readonly");
    0 讨论(0)
  • 遥遥无期
    2021-02-18 20:58

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

    Set attribute readOnly:

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

    and unset:

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

    Equivalent to object-oriented notation is also this array-oriented notation:

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

    It is also important that in JavaScript all the properties are case sensitive, so it is important to remember about the large O in the readOnly property, otherwise it will not work...

    0 讨论(0)
  • 终归单人心
    2021-02-18 21:04

    Works fine here in all major browsers I have. Here's an 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.

    0 讨论(0)
  • 余生分开走
    2021-02-18 21:07

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

    <!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>
    0 讨论(0)
 看不清?
提交回复
热议问题