Menu
$(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> </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"> 
498
In the event handler function of the remove button, we are calling the removeAttribute() method of the input element to remove readonly attribute.
Use setAttribute() Method to add the readonly attribute to the form input field using JavaScript. setAttribute() Method: This method adds the defined attribute to an element, and gives it the defined value. If the specified attribute already present, then the value is being set or changed.
The :read-only selector selects elements which are "readonly". Form elements with a "readonly" attribute are defined as "readonly".
A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.
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> </td> <td><div id="states"><input type="text" name="state" value="FORCE_FOR_SELECT" readonly id="state"></div></td> 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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
