Question

当我使用.prop（'disabled'，true）来禁用按钮时，它可以工作，但按钮看起来没有禁用。我记得在过去我使用.attr（'禁用'，'禁用'）禁用按钮时，它们会变得更加明显禁用，即文本会变灰或者用户不会尝试点击。现在我认为按钮边框有点淡化，但文字不是。

恢复旧行为的最简单方法是什么？我很懒，不想编写一行代码来禁用按钮而另一行代码使其看起来处于禁用状态 - 如果可能，我希望在单个命令中获得两种效果。我应该使用除按钮以外的其他元素吗？一种不同的禁用方法？

我在这里做了一个小提琴：http://jsfiddle.net/ak2MG/。这是代码。

HTML：

<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>

使用Javascript：

$('#mybutton').click( function() {
    $('#mydiv').append("<p>Button was clicked.</p>");
    $('#mybutton').prop('disabled',true); } );

Answer 1

或更改按钮的不透明度

$('#mybutton').click( function() {
    $('#mydiv').append("<p>Button was clicked.</p>");
    $('#mybutton').prop('disabled',true).css('opacity',0.5);
});

Fiddle

Answer 2

我会在按钮上添加一个disabled类。

这使您可以从CSS而不是javascript控制样式，因此您的所有样式都在一个地方（它应该在哪里）。

演示： JSFiddle

<强> HTML

<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>

<强> JS

$('#mybutton').click( function() {
    $('#mydiv').append("<p>Button was clicked.</p>");
    $('#mybutton').prop('disabled',true).addClass('disabled');
});

<强> CSS

.disabled {
    color: #999;
}

Answer 3

非常简单，只需更改文字样式

即可

$('#mybutton').click( function() {
    $('#mydiv').append("<p>Button was clicked.</p>");
    my_button_disable(this);
});

function my_button_disable(btn) {
    $(btn).prop('disabled',true);
    $(btn).css('color', 'lightgray');
    // put whatever else you want here
}

http://jsfiddle.net/ak2MG/6/

Answer 4

最简单 - 在CSS中添加状态用CSS定位它来改变风格，重要的是指针事件：none将使它无响应。：

public void onUploadImageClick(View view){
    Intent galleryIntent = new Intent(Intent.ACTION_GET_CONTENT);
    galleryIntent.setType("Image/*");
    startActivityForResult(galleryIntent, GALLERY_REQUEST);
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);

    if(requestCode == GALLERY_REQUEST && resultCode == RESULT_OK){
        uri=data.getData();
        imageButton = (ImageButton)findViewById(R.id.image_button);
        imageButton.setImageURI(uri);
    }
}

Answer 5

从attr（）到prop（）的更改仅适用于jQuery API，与您在禁用按钮的样式中观察到的任何差异无关。

禁用按钮的样式由浏览器决定。您提供的小提琴在Google Chrome（版本33.0.1750.154 m）中看起来非常“禁用”。如果您想根据自己的喜好改变禁用按钮的样式，我建议根据属性添加类OR样式

button[disabled],
button.disabled {
    color: #999;
    background: #DDD;
    border: 1px solid #CCC;
}

使用jQuery禁用禁用按钮外观的最简单方法

5 个答案: