web-dev-qa-db-fra.com

Bouton de désactivation dans jQuery

Ma page crée plusieurs boutons en tant que id = 'rbutton_"+i+"'. Ci-dessous mon code:

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

En javascript

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

Mais cela ne désactive pas mon bouton quand je clique dessus. 

jquery
308
user2047817

Utilisez plutôt .prop (et nettoyez votre chaîne de sélecteur):

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

hTML généré:

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

Mais l'approche "meilleures pratiques" consiste à utiliser la liaison d'événement JavaScript et this à la place:

$('.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/

574
Blazemonger

Essayez ce code:
HTML

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

une fonction 

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

Autre solution avec jQuery

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

DEMO

Autre solution avec du javascript pur

<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

30
Alessandro Minoccheri

Il y a deux choses ici, et la réponse la plus votée est techniquement correcte selon la question des PO.

Brièvement résumé comme suit:

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

Cependant, si vous utilisez l'interface utilisateur jQuery (je sais que l'OP n'était pas le cas, mais certaines personnes arrivant ici pourraient l'être), alors que cela désactivera l'événement de clic des boutons, il ne fera pas apparaître le bouton désactivé conformément au style de l'interface utilisateur.

Si vous utilisez un bouton de style jQuery UI, il doit être activé/désactivé via:

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

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

25
Morvael

Essaye ça 

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

C'est le moyen le plus simple à mon avis:

// 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>

17
Lucas

bouton de désactivation:

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

bouton d'activation:

$('#button_id').removeAttr('disabled');
12
Cris

C'est tout simplement bien, en HTML:

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

Du côté de JQuery mettez cette fonction pour le bouton de désactivation:

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

Pour le bouton d'activation:

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

C'est tout.

11
George Pradeep

Voici comment vous faites avec 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
2
user890332

Je veux désactiver le bouton à certaines conditions, j'utilise la 1ère solution mais cela ne fonctionnera pas pour moi. Mais quand j’utilise le second, cela a fonctionné. Voici les sorties de la console du navigateur.

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

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

2 . $ ('# psl2 .btn-continue'). Attr ("désactivé", "désactivé") 

<a class=​"btn btn-yellow btn-continue" href=​"#" disabled=​"disabled">​Next​</a>​
1
Pooja Mane

Cela fonctionne pour moi:

<script type="text/javascript">
function change(){
    document.getElementById("submit").disabled = false;
}
</script>
1
Javi Ps

Pour les boutons Jquery UI, cela fonctionne:

$("#buttonId").button( "option", "disabled", true | false );
0
Khrys aka Louis