Question

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

现在我遇到的麻烦是，我有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'
包含所有感兴趣的元素的div相对于所表达的$(this).closest(".row").next("div")
需要更改文本颜色的元素使用.find("div, p, span, label").css('color', ['black','gray'][+state])
需要启用/禁用的元素使用.find('input, button, textarea').prop('disabled', state)
最后，.eq(0).triggerHandler('click')模拟点击＆＃34;是＆＃34;单选按钮，从而建立初始状态。

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

通过灯光调整，代码可以在表单的其他部分重复使用。

<强> updated fiddle

单击IE，jquery为灰色并禁用表单元素

1 个答案: