javascript - que - ¿Cómo puedo agregar y eliminar el atributo "solo lectura"?
no escribir en un input html (4)
Funciona bien aquí en todos los principales navegadores que tengo. Aquí hay un 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>
Al alternar, el fondo se vuelve gris (aunque no todos los navegadores hacen eso) y la entrada no se puede editar (esto es coherente entre todos los navegadores web). Entonces tu problema está en otra parte. Probablemente estés usando un doctype pobre y posiblemente también en combinación con un doctype pobre.
$(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);
}
***/
});
Aquí están mis códigos de muestra.
<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>
También he añadido doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Mientras que la propiedad readonly toma un valor booleano, el atributo readonly toma un valor de cadena. Debes usar el código que has comentado:
$("#rate").attr("readonly", "readonly");
Puedes hacerlo en JS puro (o Vanilla JS ) sin jQuery :
Establecer atributo readOnly :
document.getElementById("state").readOnly = true;
y unset:
document.getElementById("state").readOnly = false;
Sí, finalmente he encontrado la solución. He usado la función de cambio.
<!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>