ansaurus

Question

How I can add and remove the attribute "readonly" ?

Answer 1

A:

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"&gt;&lt;/script&gt;
        <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.

BalusC 2010-03-22 23:23:41

Live sample: http://jsbin.com/osapo

Matchu 2010-03-22 23:25:25

Answer 2

+2 A:

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");

Guffa 2010-03-22 23:24:23

I've tried that code, there is still no solution.

question_about_the_problem 2010-03-22 23:26:08

jQuery is smart enough to translate this for you. The same applies to `checked` and so on.

nickf 2010-03-22 23:26:31

Regardless of jQuery, that's also dependent on the doctype used. In XHTML you would need to specify the attribute value, while in HTML you don't need to specify any one.

BalusC 2010-03-23 22:36:51

Answer 3

A:

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"&gt;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<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>

question_about_the_problem 2010-03-23 00:01:37

ansaurus

tags:

views:

answers:

How I can add and remove the attribute "readonly" ?

related questions