Question

我是新来的，手边有一个简单的（希望）问题。一旦最终用户在表单字段/元素中单击，我试图找出如何在“Apply”按钮上切换类。

我在这里可以找到演示测试页面 - http://www.iconpayment.com/test/Untitled-2.html

还有将图像作为背景或内联img src有所作为吗？

谢谢！

诺尔

Answer 1

$('.button').click(function(event){
    $(this).removeClass('button').addClass('button-disabled');
});

Answer 2

如果您最终拥有多个具有相同类名的按钮，最好在替换类时使用按钮的ID（使用与cpharmston相同的代码段）：

$('#button-div').click(function(event){
    $(this).removeClass('button').addClass('button-disabled');
});

Answer 3

......我正在试图弄清楚如何在我的“应用”按钮上切换班级一旦最终用户点击了 表单字段/元素。

$('form > input').click(function() {
    $('#button-div').removeClass().addClass('button-disabled');
});

作为可用性侧注，如果表单输入''blur'事件被触发并且没有编辑任何内容（即表单尚未变为'脏'），则重新启用按钮可能是个好主意）。

Answer 4

回答你的第一个问题......

将所有可点击的表单元素命名为“affectApply”，或者只通过选择器（#formId input，＃formId textarea等）选择它们。

然后只需使用以下内容：

$(document).ready(function(){
  $('.affectsApply').click(function(){
    $(formElement).addClass('highlight');
  });
});

Answer 5

如果您想切换往返，可以使用toggle()：

$(".toggleButton").toggle(
    function() {
        $(this).removeClass("enabled").addClass("disabled");
    },
    function() {
        $(this).removeClass("disabled").addClass("enabled");
    }
);

当然，这无论如何都不会跟踪状态，因此如果需要，您可能需要标记或其他内容来跟踪状态。

此处示例：http://docs.jquery.com/Events/toggle

使用jQuery禁用/启用按钮

5 个答案: