JQuery में बटन अक्षम करें


359

मेरा पेज कई बटन बनाता है id = 'rbutton_"+i+"'। नीचे मेरा कोड है:

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

जावास्क्रिप्ट में

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

जब मैं उस पर क्लिक करता हूं तो यह मेरे बटन को अक्षम नहीं करता है।


6
'rbutton _ "+ i +"' एक वैध आईडी नहीं है।
डायोडस - जेम्स मैकफर्लेन

मैं आईडी कैसे निर्दिष्ट कर सकता हूं। यह एक लूप के लिए मेरी जावास्क्रिप्ट में बनाया जा रहा है।
user2047817

कैसे एक jsFiddle बनाने के बारे में तो हम देख सकते हैं कि आप क्या कर रहे हैं?
j08691

5
आप शायद चाहते हैं disable(this)औरfunction disable(elem) { $(elem).attr("disabled","disabled") }
JJJ

2
jQuery अपने इंडेक्स नंबर का उपयोग करके तत्वों को संबोधित कर सकता है, इसलिए यदि आप इसे सही करते हैं, तो आपको आईडी की भी आवश्यकता नहीं हो सकती है। आप सेल्फ-रेफरेंस के रूप में डिसेबल (इस) पास कर सकते हैं।
डायोडस - जेम्स मैकफर्लेन

जवाबों:


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

लेकिन "सर्वोत्तम प्रथाओं" दृष्टिकोण जावास्क्रिप्ट घटना बाध्यकारी और 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

ठीक। यह नो रैप में काम किया - हेड में..लेकिन मैं क्यों पूछ सकता हूं? हो सकता है यह कुछ इसी तरह का हो, मैं अपने वास्तविक कोड में ऐसा नहीं कर रहा हूँ !!
user2047817

जिस तरह से jsFiddle ने इसे स्थापित किया है, ऐसा लगता है - आप अपने ब्राउज़र में "तत्व का निरीक्षण" कर सकते हैं यदि आप विश्लेषण करना चाहते हैं कि क्या हो रहा है।
ब्लेज़ेमॉन्गर

1
यह अच्छा काम करता है। बस सुनिश्चित करें कि यदि आप अजाक्स का उपयोग कर रहे हैं, तो आप सफलता और त्रुटि मामलों में बटन को सक्षम करते हैं। अजाक्स कॉल के अंत तक नहीं। क्योंकि तब यह तुरंत सक्षम हो जाएगा और आप अक्षम को बिल्कुल नहीं देख पाएंगे।
user890332

1.10.2 jQuery के साथ यह IE 11 में काम करता है, लेकिन क्रोम संस्करण 39.0.2171.95 मीटर में नहीं। संदेहास्पद रूप से, इस उत्तर के लिए उपयोग की जाने वाली फ़ेल्ड jQuery 1.10.2 प्रदान नहीं करता है
एलेक्स

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");
});

डेमो


शुद्ध जावास्क्रिप्ट के साथ अन्य समाधान

<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

शुद्ध जावास्क्रिप्ट के साथ एक तीसरा समाधान जोड़ा गया @ user2047817
एलेसेंड्रो मिनोचेरी

29

यहाँ दो चीजें हैं, और सबसे अधिक मतदान का उत्तर ओपी के प्रश्न के अनुसार तकनीकी रूप से सही है।

संक्षेप में संक्षिप्त रूप में:

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

हालांकि आपको jQuery UI का उपयोग करना चाहिए (मुझे पता है कि ओपी नहीं था लेकिन कुछ लोग यहां पहुंच सकते हैं) तब जबकि यह बटन क्लिक इवेंट को अक्षम कर देगा, लेकिन यह यूआई स्टाइल के अनुसार बटन को अक्षम नहीं करेगा।

यदि आप एक jQuery यूआई स्टाइल बटन का उपयोग कर रहे हैं तो इसे इसके माध्यम से सक्षम / अक्षम किया जाना चाहिए:

$("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
बहुत अच्छा सर। यह पूरी तरह से काम किया है। बूटस्ट्रैप बटन के साथ।
स्टेव मोरेट


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 समाधान का उपयोग कर रहा हूं, लेकिन यह मेरे लिए काम नहीं करेगा। लेकिन जब मैं 2 का उपयोग करता हूं तो यह काम करता है। बेलो ब्राउज़र कंसोल से आउटपुट होते हैं।

1. $ ('# psl2 .btn-जारी')। प्रोप ("अक्षम", सच)

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

2. $ ('# psl2 .btn-जारी')। अटर। ("अक्षम", "अक्षम")

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.