21
$(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 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
  • 3
    Your code already does that. Can you please elaborate a bit more about the problem? What actually happens and what not? If you can, can you please also repost it in flavor of an SSCCE? sscce.org Don't forget to include the doctype and tell about the browsers you tried.
    – BalusC
    Mar 22, 2010 at 23:18
  • That doesn't work and I really don't know the issue. There is no JavaScript error and no action at the page. And the input type(text) still at "readonly"... Mar 22, 2010 at 23:23

4 Answers 4

30

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
5

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
4

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");
2
  • 1
    jQuery is smart enough to translate this for you. The same applies to checked and so on.
    – nickf
    Mar 22, 2010 at 23:26
  • 1
    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
    Mar 23, 2010 at 22:36
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.