Отключить кнопку в JQuery

359

Моя страница создает несколько кнопок как id = 'rbutton_"+i+"'. Ниже мой код:

<button type='button' id = 'rbutton_"+i+"' onclick=disable(i);>Click me</button>

В JavaScript

function disable(i){
    $("#rbutton'+i+'").attr("disabled","disabled");
}

Но это не отключает мою кнопку, когда я нажимаю на нее.

user2047817
источник
6
'rbutton _ "+ i +"' не является действительным идентификатором.
Диодей - Джеймс Макфарлейн,
Как я могу указать идентификатор. Это создается в моем JavaScript внутри цикла for.
user2047817
Как насчет создания jsFiddle, чтобы мы могли видеть, что вы делаете?
j08691
5
Вы, вероятно, хотите disable(this)иfunction disable(elem) { $(elem).attr("disabled","disabled") }
JJJ
2
jQuery может обращаться к элементам, используя их порядковый номер, поэтому, если вы все сделаете правильно, вам могут даже не понадобиться идентификаторы. Вы можете передать disable (this) в качестве самостоятельной ссылки.
Диодей - Джеймс Макфарлейн

Ответы:

638

Используйте .propвместо этого (и очистите строку выбора):

function disable(i){
    $("#rbutton_"+i).prop("disabled",true);
}

сгенерированный HTML:

<button id="rbutton_1" onclick="disable(1)">Click me</button>
<!-- wrap your onclick in quotes -->

Но подход «лучшие практики» заключается в использовании привязки событий JavaScript и thisвместо этого:

$('.rbutton').on('click',function() {
    $(this).prop("disabled",true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="rbutton">Click me</button>

http://jsfiddle.net/mblase75/2Nfu4/

Blazemonger
источник
Вот небольшая скрипка, которую я создал. Пожалуйста, дайте мне, что я делаю не так. jsfiddle.net/2Nfu4/3
user2047817
ХОРОШО. Это работало в No Wrap - в голове .. Но могу я спросить почему? Может быть, это что-то похожее, я не делаю этого в моем собственном коде!
user2047817
Кажется, просто так, как настроил jsFiddle - вы можете «проверить элемент» в своем браузере, если хотите точно проанализировать, что происходит.
Blazemonger
1
Это хорошо работает. Просто убедитесь, что если вы используете ajax, вы включаете кнопку в случаях успеха и ошибок. Не к концу вызова Ajax. Потому что тогда он будет сразу включен, и вы вообще не увидите отключение.
user890332
С jQuery 1.10.2 он работает в IE 11, но не в Chrome версии 39.0.2171.95 m. Подозрительно, скрипка, использованная для этого ответа, не предлагает jQuery 1.10.2
Alex
35

Попробуйте этот код:
HTML

<button type='button' id = 'rbutton_'+i onclick="disable(i)">Click me</button>

функция

function disable(i){
    $("#rbutton_"+i).attr("disabled","disabled");
}

Другое решение с jquery

$('button').click(function(){ 
    $(this).attr("disabled","disabled");
});

DEMO


Другое решение с чистым JavaScript

<button type='button' id = 'rbutton_1' onclick="disable(1)">Click me</button>

<script>
function disable(i){
 document.getElementById("rbutton_"+i).setAttribute("disabled","disabled");
}
</script>

demo2

Алессандро Минокери
источник
Вторая функция .click () отлично работает в вашей демонстрации. Но я должен использовать отдельный метод, как упомянуто в вашем первом решении, но он не работает. Не могли бы вы помочь !!
user2047817
Добавлено третье решение с чистым javascript @ user2047817
Алессандро Миноккери
29

Здесь есть две вещи, и ответ, получивший наибольшее количество голосов, является технически правильным согласно вопросу ОП.

Кратко резюмируется как:

$("some sort of selector").prop("disabled", true | false);

Однако, если вы используете jQuery UI (я знаю, что OP не было, но некоторые люди, приходящие сюда, могут быть), тогда пока это отключит событие нажатия кнопок, это не заставит кнопку выглядеть отключенной согласно стилю интерфейса.

Если вы используете кнопку в стиле jQuery UI, ее следует включить / отключить с помощью:

$("some sort of selector").button("enable" | "disable");

http://api.jqueryui.com/button/#method-disable

Morvael
источник
27

Это самый простой способ на мой взгляд:

// All buttons where id contains 'rbutton_'
const $buttons = $("button[id*='rbutton_']");

//Selected button onclick
$buttons.click(function() {
    $(this).prop('disabled', true); //disable clicked button
});

//Enable button onclick
$('#enable').click(() =>
    $buttons.prop('disabled', false) //enable all buttons
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="rbutton_200">click</button>
<button id="rbutton_201">click</button>
<button id="rbutton_202">click</button>
<button id="rbutton_203">click</button>
<button id="rbutton_204">click</button>
<button id="rbutton_205">click</button>
<button id="enable">enable</button>

Лукас
источник
1
Очень приятно, сэр. Это полностью сработало. Даже с кнопками начальной загрузки.
Стив Моретц
25

Попробуй это

function disable(i){
    $("#rbutton_"+i).attr("disabled",true);
}
Мэри Энн
источник
15

кнопка отключения:

$('#button_id').attr('disabled','disabled');

кнопка включения:

$('#button_id').removeAttr('disabled');
Cris
источник
13

Просто это нормально работает, в HTML:

<button type="button" id="btn_CommitAll"class="btn_CommitAll">save</button>

В сторону JQuery поместите эту функцию для кнопки отключения:

function disableButton() {
    $('.btn_CommitAll').prop("disabled", true);
}

Для кнопки включения:

function enableButton() {
    $('.btn_CommitAll').prop("disabled", false);
}

Это все.

Джордж Прадип
источник
3

Вот как вы делаете это с AJAX.

$("#updatebtn").click(function () {
    $("#updatebtn").prop("disabled", true);
    urlToHandler = 'update.ashx';
            jsonData = data;
            $.ajax({
                url: urlToHandler,
                data: jsonData,
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json',
                success: function (data) {
                    $("#lbl").html(data.response);
                    $("#updatebtn").prop("disabled", false);
                    //setAutocompleteData(data.response);
                },
                error: function (data, status, jqXHR) {
                    alert('There was an error.');
                    $("#updatebtn").prop("disabled", false);
                }
            }); // end $.ajax
user890332
источник
в некоторых версиях jQuery вы должны использовать .attr('disabled', true). Я не знаю какая, но версия, которую я должен использовать (минимизированная и связанная как часть приложения, над которым я работаю), подбрасываетсяobject does not support prop
JoeBrockhaus
2

Это работает для меня:

<script type="text/javascript">
function change(){
    document.getElementById("submit").disabled = false;
}
</script>
Хави Пс
источник
2

Я хочу отключить кнопку при некоторых условиях, я использую 1-е решение, но оно не будет работать для меня. Но когда я использую 2-й, это сработало. Ниже приведены выводы из консоли браузера.

1. $ ('# psl2 .btn-continue'). Prop ("disabled", true)

<a class=​"btn btn-yellow btn-continue" href=​"#">​Next​</a>

2. $ ('# psl2 .btn-continue'). Attr ("отключено", "отключено")

<a class=​"btn btn-yellow btn-continue" href=​"#" disabled=​"disabled">​Next​</a>
Пуджа Мане
источник
0

Для кнопок интерфейса Jquery это работает:

$("#buttonId").button( "option", "disabled", true | false );
Хрис ака Луи
источник