ปิดการใช้งานปุ่มใน 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");
}

แต่มันไม่ได้ปิดการใช้งานปุ่มของฉันเมื่อฉันคลิกที่มัน


6
'rbutton _ "+ i +"' ไม่ใช่รหัสที่ถูกต้อง
Diodeus - James MacFarlane

ฉันจะระบุรหัสได้อย่างไร มันถูกสร้างขึ้นในจาวาสคริปต์ของฉันภายในวง
user2047817

วิธีการเกี่ยวกับการสร้าง jsFiddle เพื่อให้เราสามารถเห็นสิ่งที่คุณทำ?
j08691

5
คุณอาจต้องการdisable(this)และfunction disable(elem) { $(elem).attr("disabled","disabled") }
JJJ

2
jQuery สามารถระบุองค์ประกอบโดยใช้หมายเลขดัชนีดังนั้นหากคุณทำถูกต้องคุณอาจไม่จำเป็นต้องใช้ ID คุณสามารถผ่านการปิดการใช้งาน (นี่) เป็นการอ้างอิงตนเอง
Diodeus - James MacFarlane

คำตอบ:


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/


นี่คือซอเล็ก ๆ ที่ฉันสร้างขึ้น โปรดให้ฉันในสิ่งที่ฉันทำผิด jsfiddle.net/2Nfu4/3
user2047817

ตกลง. มันทำงานใน No Wrap - in Head .. แต่ฉันจะถามทำไม อาจเป็นสิ่งที่คล้ายกันฉันไม่ได้ทำในรหัสจริงของฉัน !!
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");
});

การสาธิต


โซลูชันอื่น ๆ ด้วย 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


สอง. คลิกฟังก์ชัน () ทำงานอย่างสมบูรณ์แบบในการสาธิตของคุณ แต่ฉันจะใช้วิธีแยกตามที่กล่าวไว้ในวิธีแก้ปัญหาแรกของคุณ แต่มันไม่ทำงาน คุณช่วยได้ไหม !!
user2047817

เพิ่มโซลูชันที่สามด้วย pure javascript @ user2047817
Alessandro Minoccheri

29

มีสองสิ่งที่นี่และคำตอบที่ได้รับการโหวตสูงสุดนั้นถูกต้องทางเทคนิคตามคำถาม OPs

สรุปสั้น ๆ ดังนี้:

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

อย่างไรก็ตามคุณควรใช้ jQuery UI (ฉันรู้ว่า OP ไม่ได้ แต่อาจมีบางคนที่มาถึงที่นี่) ในขณะที่นี่จะปิดการใช้งานเหตุการณ์การคลิกที่ปุ่มมันจะไม่ทำให้ปุ่มปรากฏปิดการใช้งานตามสไตล์ UI

หากคุณใช้ปุ่มสไตล์ jQuery UI คุณควรเปิดใช้งาน / ปิดใช้งานผ่าน:

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

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


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
คุณเป็นคนดีมากทั้งหมดนี้ใช้งานได้เจ็ดปุ่มบูต
สตีฟ moretz


15

ปุ่มปิดการใช้งาน:

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

ปุ่มเปิดใช้งาน:

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

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

ในบางรุ่นของ 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 แต่มันจะไม่ทำงานสำหรับฉัน แต่เมื่อฉันใช้ 2nd มันทำงานได้ด้านล่างเป็นผลลัพธ์จากเบราว์เซอร์คอนโซล

1. $ ('# psl2 .btn-Continue'). prop ("ปิดการใช้งาน", จริง)

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.