Question

这里的人很奇怪。

我有一个包含多个字段和一个提交按钮的表单。除电子邮件字段外，所有字段都首先设置为禁用。

我有一个方法可以运行并检查电子邮件字段中的更改。如果更改，则启用所有其他字段。这在firefox，chrome和Internet Explorer 7/8/9中完美运行，但在10中它将无法正常显示。

在IE10中，应该禁用的所有字段都是，但是不显示灰色的电子邮件字段的行为就像它是只读的一样，不允许输入或聚焦。

我最初使用.prop（）方法来更改禁用状态，但是一些较旧的IE版本存在问题，所以我使用了attr（）和removeAttribute（）方法。任何想法都表示赞赏。

下面添加的解决方案 - 谢谢大家!!

<form id="query_form" class="form-inline" enctype="multipart/form-data" action="" method="post">

<input type="text" class="input-large" placeholder="email" id="email" name="email" value="" />

<input type="text" class="input-small" placeholder="start date" id="sd" name="sd" value="" disabled="disabled"/>

<input type="text" id="ed" class="input-small" placeholder="end date" name="ed" value="" disabled="disabled"/>

<button type="submit" class="btn" id="run_query" name="run_query" disabled="disabled">Run Query</button>

</form>

function check_required_fields(){
        var email = $.trim($("#email").val());
        if(email.length > 0){
            $("#query_form").find(":input").not("#email").each(function() {
             $(this).removeAttr('disabled');    
        });
        }else{
            $("#query_form").find(":input").not("#email").each(function() {
             $(this).attr('disabled', true);
              });
        }
}
$(document).ready(function(){
var timer;
$("#email").on("change keyup paste", function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        check_required_fields()
    }, 0);
}).triggerHandler('change');
    });

最后，我正在使用Jquery 1.8.3并使用bootstrap。 firebug中的控制台在IE10中也没有显示任何错误，也没有显示开发人员工具。

最后一块拼图。

在另一个脚本中，我使用相同的代码进行一次编辑，它在两个字段上运行。因此看起来如下：

<form id="query_form" enctype="multipart/form-data" action="" method="post">

<input type="text" class="input-large" placeholder="email" id="email" name="email" value="" />

<select id="qt" name="qt">
<option selected="selected" value="">select query type...</option>
<option value="taxon_group">species group</option>
<option value="site_name">site name</option>
<option value="taxon_name">species name</option>    
</select>

<input type="text" id="ed" class="input-large" placeholder="end date" name="ed" value="" disabled="disabled"/>

<button type="submit" class="btn" id="run_query" name="run_query" disabled="disabled">Run Query</button>

</form>
function check_required_fields(){
        var email = $.trim($("#email").val());
        var query_type = $("#qt").val();
        if(email.length > 0 && query_type.length > 0){
            $("#query_form").find(":input").not("#email, #qt").each(function() {
             $(this).removeAttr('disabled');    
        });
        }else{
            $("#query_form").find(":input").not("#email, #qt").each(function() {
             $(this).attr('disabled', 'disabled');
              });
        }
}
    $(document).ready(function(){
    var timer;
    $("#email, #qt").on("change keyup paste", function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            check_required_fields()
        }, 0);
    }).triggerHandler('change');
    });

除了在IE10中每次按键后电子邮件字段失去焦点外，一切正常。有什么想法吗？它不会发生在其他脚本中，只有相同的功能应用于电子邮件字段。

Answer 1

如果您愿意接受建议，可以通过简单的方法实现这一目标。

$(function(){
$("#email").keyup(function(){
    if($(this).val().length <= 0){
        $(this).siblings().each(function(){
            $(this).attr("disabled", true);
        });
    }
    else{
        $(this).siblings().each(function(){
            $(this).attr("disabled", false);
        });
    }
  });
});

这是一个小提琴：http://jsfiddle.net/6GnUS/10/

Answer 2

删除oninput事件，看起来像干扰IE10中的属性占位符。顺便说一下，因为你已经绑定了onkeyup和onchange绑定onpaste而应该最终给出与keyup / change使用的oninput完全相同的行为。

你必须推迟一些小事件才能使onpaste正常工作，顺便说一句，以避免无用的多次通话。

DEMO

$(document).ready(function () {
    var timer;
    $("#email").on("change keyup paste", function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            check_required_fields()
        }, 0);
    }).triggerHandler('change');
});

Answer 3

你需要在

之后调用.change

   $(this).prop('disabled', false).change();

Answer 4

我认为你需要改变

$(this).attr('disabled', true);

到

$(this).attr('disabled');

使用jquery删除disabled属性后，只读取输入字段

4 个答案: