jquery在点击IE时灰色并禁用表单元素

Question

我有一个需要一些条件表单处理的表单。例如，当用户选择“是的，他们正在申请住房”时，我想启用一些表单元素并将字体颜色从灰色更改为黑色。在视觉上，我希望整个表单看起来被禁用，直到用户选择“是”。

现在我遇到的麻烦是，我有一个 jquery，它可以通过单击将类从灰色类更改为黑色或普通类。我能够为以下一个以外的多个表单部分实现此功能。它适用于chrome，但不适用于IE，我验证了我的html，但没有解决它。我已尽我所能解决此问题，但找不到问题。

这里是步骤或查看小提琴http://jsfiddle.net/vq1b1par/5/：

创建 css 以使元素变灰

div.row.grey_me_homeless, div.col-lg-12.grey_me_homless p span,  p.form_legend.grey_me_homeless span{

color:grey !important;

 }

jquery 禁用部分中的所有表单元素

$("div.col-lg-12.grey_me_homeless label :input, div.col-lg-12.grey_me_homeless textarea, .grey_me_homeless div :input, div.col-lg-12.grey_me_homeless").each(function(){

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

 });

点击时，将禁用的元素更改为启用并删除 css 类

$('#emergency_yes').click(function () { 

  $("div.row.grey_me_homeless").removeClass().addClass("row contact_form color_font_homeless");
  $("div.col-lg-12.grey_me_homeless").removeClass().addClass("col-lg-12 color_font_homeless");
  $("p.form_legend.grey_me_homeless").removeClass().addClass("form_legend color_font_homeless");
  $("div.col-lg-12.color_font_homeless label :input, div.col-lg-12.color_font_homeless textarea, .color_font_homeless div :input").each(function(){
    $(this).prop('disabled', false);
  })            
})

Answer 1

这比问题中的 javascript 所相信的要简单得多。

首先，删除grey_me_homeless的CSS指令，让字体颜色由javascript控制。

其次，将所有的javascript替换为：

$(".row.contact_form .col-lg-12").find("input[type='radio']").on('click', function() {
    var state = this.value === 'yes';
    var textbox = state ? document.getElementById("immediate") : document.getElementById("employer_address_one");
    if(state || !$("input#immediate").is(":disabled")) {
        $(this).closest(".row").next("div").find("div, p, span, label").css('color', ['black','gray'][+!state]).end().find('input, button, textarea').prop('disabled', !state);
    }
    textbox.focus();
    textbox.scrollIntoView();
    scrollBy(0, -170);
}).eq(1).triggerHandler('click');

解释：

• 一个单击处理程序附加到两个单选按钮。
• 通过测试this.value === 'yes' 确定点击了两个按钮中的哪一个
• 通过表达式$(this).closest(".row").next("div") 相对于单击的单选按钮找到包含所有感兴趣元素的 div
• 需要更改其文本颜色的元素使用.find("div, p, span, label").css('color', ['black','gray'][+state]) 处理
• 需要启用/禁用的元素使用.find('input, button, textarea').prop('disabled', state) 处理
• 最后，.eq(0).triggerHandler('click') 模拟单击​​“是”单选按钮，从而建立初始状态。

应该可以在所有主流浏览器中使用，包括 IE（在 Opera 中测试）。

通过轻度适应，代码可以在表单的其他部分重复使用。

updated fiddle