使用Javascript将禁用的输入字段转换为只读输入字段
[英]With Javascript convert disabled input fields into readonly input fields
问题描述
I have a problem with a form in IE. 
我在IE中的表单有问题。 I have disabled fields in form i,e. 我已经禁用了表格i，e。 field having property disabled="disabled" . 属性已disabled="disabled"字段。 These fields show the input text in grey color and that looks very dull/blurred and if i try apply css changes to such fields, it will not work for IE, but works for other browsers like chrome, firefox. 这些字段显示灰色的输入文本，看起来非常暗淡/模糊，如果我尝试将css更改应用于此类字段，它将无法用于IE，但适用于其他浏览器，如chrome，firefox。
Is there any way to make the text to better font color here? 有没有办法让文字在这里更好的字体颜色？
I thought one way of doing this is removing property disabled="disabled" and add property readonly="readonly" with javascript. 我认为这样做的一种方法是删除属性disabled="disabled"并使用javascript添加属性readonly="readonly" 。 If this is possible then how can i do this with Javascript. 如果这是可能的，那我怎么能用Javascript做到这一点。 I am new to Javascript, so please help me 我是Javascript的新手，所以请帮助我
Below HTML to explain the behaviour. 下面用HTML来解释行为。 Run this in both IE and other browser to see the difference. 在IE和其他浏览器中运行它以查看差异。
<html>
<head>
<style type="text/css">
.col {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>Editable field: </td>
<td>
<input type="text" id="editable-field-id" value="Editable field" class="col"/>
</td>
</tr>
<tr>
<td>Disabled field: </td>
<td>
<input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
</td>
</tr>
<tr>
<td>Readonly field: </td>
<td>
<input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
</td>
</tr>
</table>
</body>
</html>
I am testing this in IE9. 我在IE9中测试这个。
6 个解决方案
解决方案1
2 2013-12-25 04:37:56
You can change disabled input fields into readonly ones by using the .prop() method available in jQuery. 您可以使用jQuery中提供的.prop()方法将禁用的输入字段更改为只读输入字段。 I typically discourage the use of .attr() , and this is why . 我通常不鼓励使用.attr() ， 这就是原因 。
$(function (){
$('input').prop({
'disabled': false,
'readonly': true
});
});
Although the method .removeProp() is available, documentation encourages refrain when using it , because, to quote, it "will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead." 虽然方法.removeProp()是可用的，但文档鼓励在使用时克制 ，因为，引用它“将完全删除属性，一旦删除，就不.prop()添加到元素。使用.prop()来设置这些属性改为假。“
View demo here: http://jsfiddle.net/teddyrised/tE98z/ 在这里查看演示： http ： //jsfiddle.net/teddyrised/tE98z/
解决方案2
0 2012-10-07 06:43:07
document.getElementById("your_field").readOnly=true;
或者，使用jQuery：
$('#your_field').attr('readonly', true);
解决方案3
0 2012-10-07 06:45:23
<html>
<head>
<style type="text/css">
.col {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>Editable field: </td>
<td>
<input type="text" id="editable-field-id" value="Editable field" class="col"/>
</td>
</tr>
<tr>
<td>Disabled field: </td>
<td>
<input type="text" disabled="disabled" id="disabled-field-id" value="Disabled field" class="col" />
</td>
</tr>
<tr>
<td>Readonly field: </td>
<td>
<input type="text" readonly="readonly" id="readonly-field-id" value="Readonly field" class="col"/>
</td>
</tr>
</table>
<script type = "text/javascript">
document.getElementById("disabled-field-id").disabled = false;
document.getElementById("disabled-field-id").readOnly = true;
</script>
</body>
</html>
解决方案4
0 2015-05-08 16:58:22
Use the setAttribute property. 使用setAttribute属性。 Note in example that if select 1 apply the readonly attribute on textbox, otherwise remove the attribute readonly. 请注意，例如，如果select 1在文本框上应用readonly属性，否则只读取readonly属性。
http://jsfiddle.net/baqxz7ym/2/ http://jsfiddle.net/baqxz7ym/2/
document.getElementById("box1").onchange = function(){
if(document.getElementById("box1").value == 1) {
document.getElementById("codigo").setAttribute("readonly", true);
} else {
document.getElementById("codigo").removeAttribute("readonly");
}
};
<input type="text" name="codigo" id="codigo"/>
<select id="box1">
<option value="0" >0</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
解决方案5
0 2017-10-18 15:16:57
if you disable the inputs programmatically can set style as you want 如果以编程方式禁用输入，可以根据需要设置样式
try it: 试试吧：
//bloqueo todos los radiobuttons y checkboxs
//block all radiobuttons and checkbox
jQuery(document).on("change", 'input:checkbox.yourClass,input:radio.yourClass', function () {
jQuery(this).prop("checked", false);
});
//bloqueo campos de texto
//block all text fields
jQuery(document).on("focusin", 'input.yourClass, textarea.yourClass', function () {
jQuery(this).blur();
});
//bloqueo selects
//block all selects
jQuery(document).on("focusin", 'select.yourClass', function (event) {
var $selectDiabled = jQuery(this).attr('disabled', 'disabled');
setTimeout(function(){ $selectDiabled.removeAttr("disabled"); }, 30);
});
if you want set style they aren't technically disabled 如果你想要设置样式，他们在技术上不会被禁用
here can see the original code: https://jsfiddle.net/9kjqjLyq/ 这里可以看到原始代码： https ： //jsfiddle.net/9kjqjLyq/
解决方案6
-2 2012-10-07 07:09:19
You need to depend on a pure javascript(preferrably jQuery) solution. 你需要依赖纯粹的javascript（最好是jQuery）解决方案。
Add a custom attribute to all your controls: 为所有控件添加自定义属性：
<input type="text" disabled="true" />
Now you can check if they are disabled and you can proceed to block them using javascript: 现在您可以检查它们是否已被禁用，您可以继续使用javascript来阻止它们：
var value = yourTextBox.value; //the last value that the control holds,
//before it was disabled?
$('yourTextBox').click(function() {
value = $(this).value;
});
$('yourTextBox').blur(function() {
if($(this).attr('disabled') == 'true')
$(this).value = value;
});
To add more strictness, add another function: 要添加更严格，请添加其他功能：
$('yourTextBox').keypress(function() {
if($(this).attr('disabled') == 'true')
$(this).value = value;
});
If you want something simple, I would recommend this: 如果你想要简单的东西，我会推荐这个：
$('yourTextBox').keypress(function() {
if($(this).attr('disabled') == 'true')
return false;
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.