0

一个奇怪的家伙在这里。

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

我有一个方法可以运行并检查电子邮件字段的更改。如果它发生变化，则启用所有其他字段。这在 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 并使用引导程序的另一条信息。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 中每次按键后电子邮件字段失去焦点外，一切都很好。任何想法为什么？它不会发生在其他脚本中，并且仅将相同的功能应用于电子邮件字段。

4

4 回答 4

2

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

$(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/

于 2013-07-26T14:33:45.870 回答
2

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

您必须延迟一些事件才能使 onpaste 正常工作，顺便说一句，以避免无用的多次调用。

演示

$(document).ready(function () {
    var timer;
    $("#email").on("change keyup paste", function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            check_required_fields()
        }, 0);
    }).triggerHandler('change');
});
于 2013-07-26T14:35:53.270 回答
0

你需要调用 .change 之后

   $(this).prop('disabled', false).change();
于 2013-07-26T14:32:32.480 回答
0

我认为你需要改变

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

到

$(this).attr('disabled');
于 2013-07-26T14:53:03.790 回答