Question

我有一个工作的javascript版本来禁用/启用一个按钮，但我无法使用jQuery工作。

我的jsfiddle有两个版本。 javascript版本已注释掉。

    //NOT WORKING jQuery
   function controls(id) {
   if (id === "button_start") {
    //$('button_start').prop('disabled','disabled');
    // $('button_stop').removeProp('disabled','disabled');

    // testing
    $('#button_start').on('click',function() {
        $(this).prop('disabled', 'disabled');
    });
    $('#button_stop').on('click', function(){
        $(this).removeProp('disabled', 'disabled');
    });

    //console.log(id);

   } else {
    //$('button_stop').prop('disabled','disabled');
    //$('button_start').removeProp('disabled','disabled');

     // testing
    $('#button_stop').click(function() {
        $(this).prop('disabled', 'disabled');
    });
    $('#button_start').click(function(){
        $(this).removeProp('disabled', 'disabled');
    });
      //console.log(id);
        }
    }

jsFiddle：https://jsfiddle.net/tommy6s/w2u8eskv/

感谢您的帮助！

Answer 1

这可能无法解决您的问题，但是您使用的removeProp方法错误。根据jQuery文档，removeProp只接受一个属性

.removeProp( propertyName )
propertyName
Type: String
The name of the property to remove.

在您的示例中，我会更改看起来像这样的行

$('#button_start').click(function(){
    $(this).removeProp('disabled', 'disabled');
});

到这个

$('#button_start').click(function(){
    $(this).removeProp('disabled');
});

https://api.jquery.com/removeProp/

另外，请记住，id元素必须以#符号开头。你在你的OP中有这个但不是小提琴。

Answer 2

您的选择器错了。

$('button_start')

应该是

$('#button_start') 
   ^--------------- Missing id selector syntax

然后你需要为小提琴包含jQuery库才能开始工作。

Answer 3

添加样式：

#button_start:disabled{background:blue;opacity:0.3;}

和你的剧本：

function controls(id) {

    if (id === "button_start") {
        $('#button_start').attr('disabled','disabled');      
        $('#button_stop').removeProp('disabled');
    } else {
        $('#button_stop').attr('disabled','disabled');
        $('#button_start').removeProp('disabled');
    }
}

Answer 4

对于1.6之后的jQuery版本：

$('#button_start').prop('disabled', false); //to enable and pass true to disable

对于其他选项和版本，请查看此SO回答Disabling and enabling an HTML input button

使用jquery禁用启用按钮

4 个答案: