Question

我在IE浏览器中遇到问题。我已经禁用了表格i，e。具有属性disabled="disabled"的字段。这些字段显示灰色的输入文本，看起来非常暗淡/模糊，如果我尝试将css更改应用于此类字段，它将无法用于IE，但适用于其他浏览器，如chrome，firefox。

有没有办法让文字在这里更好的字体颜色？

我认为这样做的一种方法是删除属性disabled="disabled"并使用javascript添加属性readonly="readonly"。如果这是可能的，那我怎么能用Javascript做到这一点。我是Javascript的新手，所以请帮帮我

在HTML下面解释行为。在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>

我在IE9中测试它。

Answer 1

您可以使用jQuery中提供的.prop()方法将禁用的输入字段更改为只读输入字段。我通常不鼓励使用.attr()和this is why。

$(function (){
    $('input').prop({
        'disabled': false,
        'readonly': true
    });
});

虽然方法.removeProp()可用，documentation encourages refrain when using it，因为要引用它“将完全删除该属性，一旦删除，就无法再次添加到元素。使用.prop()将这些属性设置为false。“

在此处查看演示：http://jsfiddle.net/teddyrised/tE98z/

Answer 2

document.getElementById("your_field").readOnly=true;

或者，使用jQuery：

$('#your_field').attr('readonly', true);

Answer 3

<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>

Answer 4

使用setAttribute属性。请注意，例如，如果select 1在textbox上应用readonly属性，否则只读取readonly属性。

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>

Answer 5

如果以编程方式禁用输入，可以根据需要设置样式

试一试：

    //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);
  });

如果你想要设置风格，他们不会在技术上被禁用

在这里可以看到原始代码：https://jsfiddle.net/9kjqjLyq/

Answer 6

你需要依赖纯粹的javascript（最好是jQuery）解决方案。

为所有控件添加自定义属性：

<input type="text" disabled="true" />

现在您可以检查它们是否已被禁用，您可以使用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;
});

要添加更严格，请添加其他功能：

$('yourTextBox').keypress(function() {
    if($(this).attr('disabled') == 'true')
        $(this).value = value;
});

如果你想要简单的东西，我建议你这样做：

$('yourTextBox').keypress(function() {
    if($(this).attr('disabled') == 'true')
        return false;
});

使用Javascript将禁用的输入字段转换为只读输入字段

6 个答案: