Question

我正在使用jquery中的removeAttr（'class'）和removeClass（）函数。

removeAttr('class') OR removeClass();

我有三个按钮，当信息输入到输入文本表单字段时，我想要禁用它（不可点击）。

我已将当前代码输入以下jsfiddle链接：

http://jsfiddle.net/robgagliano/9ttfkw5t/

您将从示例中看到，css正在改变，但按钮没有禁用（即它们仍然可以点击）。

非常感谢任何指导。

Answer 1

使用keyup事件和委派的事件侦听器

$(document).ready(function(){

  $("#user-input1").on('keyup change', function() {
      if ($(this).val() != '')
          $("#id2,#id3").removeClass('on');

      else if ($(this).val() == '')
          $("#id2,#id3").addClass('on');;
  });

    $("body").on("click",".on", function(){ // delegated event listener
        var tab_id = $(this).attr('value');
        $('.select').removeClass('currentttt');
        $(".options").hide();
        $(".table1").show();
        $("#option4").show();
        $("#"+tab_id).show();
        $(this).addClass('currentttt');

    });
});

JSFiddle demo

Answer 2

这是你要找的？ http://jsfiddle.net/leojavier/9ttfkw5t/2/

$(document).ready(function(){

      $("#user-input1").on('keyup', function() {
          if ($(this).val() != '')
              $("#id2,#id3").removeAttr('class').addClass('select');
          else if ($(this).val() == '')
              $("#id2,#id3").removeAttr('class').addClass('select on');
      });

    $('.on').click(function(){
     var tab_id = $(this).attr('value');
        $('.select').removeClass('currentttt');
        $(".options").hide();
        $(".table1").show();
        $("#option4").show();
        $("#"+tab_id).show();
        $(this).addClass('currentttt');

    });
    });

Answer 3

如果要在文本框中尽快禁用用户类型，请使用 keyup（）事件处理程序

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.define('MyViewModel', {
      extend: 'Ext.app.ViewModel',
      alias: 'viewmodel.myView',
      formulas: {
        doSomething: function(getter) {
          console.log(getter('value1'), getter('value2'));
          return getter('value1') + getter('value2');
        }
      }
    });

    Ext.define('MyView', {
      extend: 'Ext.panel.Panel',
      xtype: 'myView',
      viewModel: {
        type: 'myView'
      },
      config: {
        myValue: null
      },
      publishes: {
        myValue: true
      },
      items: [
        {
          xtype: 'displayfield',
          fieldLabel: 'myValue',
          bind: {
            value: '{myValue}'
          }
        }
      ]
    });

    Ext.create('Ext.container.Container', {
      renderTo: Ext.getBody(),
      items: [
        {
          xtype: 'displayfield',
          fieldLabel: 'display',
          bind: {
            value: '{doSomething}'
          }
        },
        {
          xtype: 'myView',
          reference: 'view1',
          title: 'View1',
          bind: {
            myValue: '{value1}'
          }
        },
        {
          xtype: 'myView',
          reference: 'view2',
          title: 'View2',
          bind: {
            myValue: '{value2}'
          }
        }
      ],
      viewModel: {
        data: {
          value1: 'Something',
          value2: 'something else'
        }
      }
    })
  }
});

Check out this fisddle

Answer 4

删除类不会删除绑定到该元素的事件。所以添加：

$("#id2,#id3").unbind();

当你不想让它再发射时。

请参阅此SO答案以澄清：

JQuery Class Selector still firing after removeClass

请注意，如果您希望能够在取消绑定后点击第2和第3个div，则必须再次重新绑定事件。请参阅：http://api.jquery.com/bind/

另一种方法是（未经测试）：

How to disable and then enable onclick event on <div> with javascript

jquery removeAttr（'class'）仍保留该类的元素

4 个答案: