Nonaktifkan tombol di jQuery

359

Halaman saya membuat banyak tombol sebagai id = 'rbutton_"+i+"'. Di bawah ini adalah kode saya:

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

Dalam Javascript

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

Tapi itu tidak menonaktifkan tombol saya ketika saya mengkliknya.

pengguna2047817
sumber
6
'rbutton _ "+ i +"' bukan ID yang valid.
Diodeus - James MacFarlane
Bagaimana saya bisa menentukan id. Ini dibuat di javascript saya di dalam for loop.
user2047817
Bagaimana dengan membuat jsFiddle sehingga kita dapat melihat apa yang Anda lakukan?
j08691
5
Anda mungkin ingin disable(this)danfunction disable(elem) { $(elem).attr("disabled","disabled") }
JJJ
2
jQuery dapat mengatasi elemen dengan menggunakan nomor indeks mereka, jadi jika Anda melakukannya dengan benar, Anda bahkan mungkin tidak memerlukan ID. Anda dapat melewati disable (ini) sebagai referensi-sendiri.
Diodeus - James MacFarlane

Jawaban:

638

Gunakan .propsebagai gantinya (dan bersihkan string pemilih Anda):

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

HTML yang dihasilkan:

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

Tetapi pendekatan "praktik terbaik" adalah menggunakan pengikatan acara JavaScript dan thissebagai gantinya:

$('.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
sumber
Ini biola kecil yang saya buat. Tolong beri tahu saya apa yang saya lakukan salah. jsfiddle.net/2Nfu4/3
user2047817
BAIK. Ini bekerja di No Wrap - in Head..Tapi bolehkah saya bertanya mengapa? Mungkin ini adalah sesuatu yang mirip, saya tidak melakukan ini dalam kode saya yang sebenarnya !!
user2047817
Sepertinya cara jsFiddle mengaturnya, tampaknya - Anda dapat "memeriksa elemen" di peramban jika Anda ingin menganalisis secara tepat apa yang terjadi.
Blazemonger
1
Ini bekerja dengan baik. Pastikan bahwa jika Anda menggunakan ajax, Anda mengaktifkan tombol dalam kasus sukses dan kesalahan. Tidak pada akhir panggilan ajax. Karena itu akan segera diaktifkan dan Anda tidak akan melihat menonaktifkan sama sekali.
user890332
Dengan jQuery 1.10.2 berfungsi di IE 11, tetapi tidak di Chrome Versi 39.0.2171.95 m. Curiga, biola yang digunakan untuk jawaban ini tidak menawarkan jQuery 1.10.2
Alex
35

Coba kode ini:
HTML

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

fungsi

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

Solusi lain dengan jquery

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

DEMO


Solusi lain dengan javascript murni

<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

Alessandro Minoccheri
sumber
Fungsi .click () kedua berfungsi dengan baik di demo Anda. Tapi saya sudah menggunakan metode terpisah seperti yang disebutkan dalam solusi pertama Anda tetapi tidak berhasil. Bisakah Anda membantu !!
user2047817
Menambahkan solusi ketiga dengan javascript murni @ user2047817
Alessandro Minoccheri
29

Ada dua hal di sini, dan jawaban terpilih tertinggi secara teknis benar sesuai dengan pertanyaan OP.

Ringkas diringkas sebagai:

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

Namun jika Anda menggunakan jQuery UI (saya tahu OP tidak tetapi beberapa orang yang tiba di sini mungkin) maka sementara ini akan menonaktifkan acara klik tombol itu tidak akan membuat tombol tampak dinonaktifkan sesuai gaya UI.

Jika Anda menggunakan tombol gaya jQuery UI maka itu harus diaktifkan / dinonaktifkan melalui:

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

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

Morvael
sumber
27

Ini adalah cara paling sederhana menurut saya:

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

Lucas
sumber
1
Tuan yang sangat baik. Ini benar-benar berhasil. Bahkan dengan tombol bootstrap.
steve moretz
25

Coba ini

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

tombol nonaktifkan:

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

aktifkan tombol:

$('#button_id').removeAttr('disabled');
Cris
sumber
13

Cukup berfungsi dengan baik, dalam HTML:

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

Di sisi JQuery taruh fungsi ini untuk tombol disable:

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

Untuk mengaktifkan tombol:

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

Itu saja.

George Pradeep
sumber
3

Begini cara Anda melakukannya dengan 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
pengguna890332
sumber
di beberapa versi jQuery, Anda harus menggunakan .attr('disabled', true). Saya tidak tahu yang mana, tetapi versi yang saya harus gunakan (diperkecil dan dibundel sebagai bagian dari aplikasi yang sedang saya kerjakan) muntah denganobject does not support prop
JoeBrockhaus
2

Ini bekerja untuk saya:

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

Saya ingin menonaktifkan tombol pada beberapa kondisi, saya menggunakan solusi pertama tetapi tidak berfungsi untuk saya. Tetapi ketika saya menggunakan yang ke-2 itu berhasil. Di bawah ini adalah output dari konsol browser.

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

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

2. $ ('# psl2 .btn-continue'). Attr ("dinonaktifkan", "dinonaktifkan")

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

Untuk tombol Jquery UI ini berfungsi:

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