मैं फ़ंक्शन से jQuery संवाद में एक बटन को कैसे अक्षम कर सकता हूं?


237

मेरे पास एक jQuery संवाद है जिसमें उपयोगकर्ता को कुछ जानकारी दर्ज करने की आवश्यकता होती है। इस रूप में, मेरे पास "जारी रखें" बटन है। मैं चाहूंगा कि यह "जारी" बटन केवल तभी सक्षम हो जब एक बार सभी फ़ील्ड्स में सामग्री हो, अन्यथा यह अक्षम बना रहेगा।

मैंने एक फ़ंक्शन लिखा है जिसे हर बार कहा जाता है कि एक फ़ील्ड स्थिति बदल गई है। हालाँकि, मुझे नहीं पता कि इस फ़ंक्शन से संवाद बटन को कैसे सक्षम और अक्षम करना है। मुझे क्या करना चाहिए?

उफ़ और मैं यह बताना भूल गया कि ये बटन निम्नानुसार बनाए गए थे:

$(function() {
  $("#dialog").dialog({
    bgiframe: true,
    height: 'auto',
    width: 700,
    show: 'clip',
    hide: 'clip',
    modal: true,
    buttons: {
      'Add to request list': function() {
        $(this).dialog('close');
        $('form').submit();
      },
      'Cancel': function() {
        $(this).dialog('close');
      }
    }
  })
});

इसका एक अच्छा जवाब है: stackoverflow.com/questions/3646408/…
अमीर

3
मैंने इस पर काफी शोध किया और पाया कि अब तक का सबसे साफ समाधान निम्नलिखित लिंक में वर्णित है: stackoverflow.com/a/4279852

जवाबों:


260

आप अक्षम संपत्ति सेट करना चाहते हैं

 $('#continueButton').attr("disabled", true);

अपडेट : आह, मैं अब जटिलता देख रहा हूं। JQuery संवाद "बटन" के तहत एक पंक्ति है कि फायदा नहीं होगा (था।

 var buttons = $('.selector').dialog('option', 'buttons');

आपको डायलॉग से बटन संग्रह प्राप्त करने की आवश्यकता होगी, जिसे आप की जरूरत है उसे खोजने के लिए लूप के माध्यम से, और फिर जैसा मैंने ऊपर दिखाया था, उसके बाद अक्षम विशेषता सेट करें।


दुर्भाग्य से JQuery के संवाद को करना बहुत आसान नहीं है, इसलिए आपको इसे थोड़ा काम करना होगा।
टॉम रिटर

हां, लेकिन बटन विकल्प DOM तत्वों को वापस नहीं करता है, लेकिन फ़ंक्शन - उनके माध्यम से पुनरावृत्ति करना ठीक है, लेकिन किसी को अक्षम करना इतना सीधा नहीं है। क्या मुझसे कोई चूक हो रही है?
रेमी डेस्प्रेस-स्माइथ

1
बटन को निष्क्रिय करने के लिए आपको इस विधि के आसपास काम करने की आवश्यकता है। पेज से परिणामी डोम तत्वों को प्राप्त करने के लिए jQuery-foo का उपयोग करें।
स्टीफन केंडल

36
सहमत - तो यह चयनित उत्तर क्यों है? -1 अपूर्ण के लिए।
रेमी Despres-Smyth

22
मेरा मानना .prop('disabled', true)है कि jQuery 1.6+
मोलोमबी

191

यह बहुत सरल है:

$(":button:contains('Authenticate')").prop("disabled", true).addClass("ui-state-disabled");

4
मुझे यह समाधान पसंद है, लेकिन इसे वास्तव में पढ़ना चाहिए: $ (": बटन: इसमें ('प्रमाण')") शामिल है। Attr ("अक्षम", "अक्षम")। addClass ('ui-state-disable'); (एडक्लास गायब था)
एरिक असबेरी

4
यदि कई संवाद हैं, तो आपको परिभाषित करना होगा कि आपको किस संवाद को बदलने की आवश्यकता है: $ ("# dialogId")। माता-पिता ()। $ (": बटन: समाहित है ('प्रमाण')")। attr ("अक्षम", " अक्षम ")। एडक्लास ('यूआई-स्टेट-अक्षम');
पोडिग

5
+1: यह अब तक का सबसे अच्छा उत्तर है ... स्वीकृत उत्तर किसी भी चीज़ का उत्तर नहीं देता है, बस एक अनिवार्य दृष्टिकोण का सुझाव देता है - जो बोझिल है btw: हमें कुछ भी करने की ज़रूरत नहीं है, jquery हमारे लिए ऐसा कर सकता है।
रासना

1
मैंने पाया कि यह काम करता है क्योंकि jQueryUI डायलॉग के बटन jQueryUI बटन हैं: $ ("# DialID")। माता-पिता ()। ढूंढें (": बटन: समाहित है ('प्रमाण')")। बटन ("अक्षम करें")। ;
लिखते हैं_

12
मेरा मानना .prop('disabled', true)है कि jQuery 1.6+
मोलोमबी

38

आप एक सरल कार्य को जटिल कर रहे हैं; jQueryUI संवाद में एक कारण से बटन सेट करने के दो तरीके हैं।

यदि आपको केवल प्रत्येक बटन के लिए क्लिक हैंडलर सेट करने की आवश्यकता है, तो उस विकल्प का उपयोग करें जो एक Objectतर्क लेता है। बटन को अक्षम करने और अन्य विशेषताओं को प्रदान करने के लिए, उस विकल्प का उपयोग करें जो एक लेता हैArray तर्क है।

निम्न उदाहरण एक बटन को अक्षम करेगा, और jQueryUI सीएसएस वर्गों और विशेषताओं को लागू करके अपने राज्य को सही ढंग से अपडेट करेगा।

चरण 1 - Arrayबटन के साथ अपना संवाद बनाएं :

// Create a dialog with two buttons; "Done" and "Cancel".
$(".selector").dialog({ buttons: [
    {
        id: "done"
        text: "Done",
        click: function() { ... }
    },
    {
        id: "cancel"
        text: "Cancel",
        click: function() { ... }
    }
] });

चरण 2 - संवाद बनने के बाद पूर्ण बटन को सक्षम / अक्षम करें:

// Get the dialog buttons.
var dialogButtons = $( ".selector" ).dialog("option", "buttons");

// Find and disable the "Done" button.
$.each(buttons, function (buttonIndex, button) {
    if (button.id === "done") {
        button.disabled = true;
    }
})

// Update the dialog buttons.
$(".selector").dialog("option", "buttons", dialogButtons);

2
सही विचार, लेकिन eachलूप अनावश्यक है। सरणी classमें एक विशेषता निर्दिष्ट करें buttonsऔर आप इसका उपयोग सही तत्व खोजने के लिए कर सकते हैं।
cdmckay

जैसा कि cdmackay ने कहा, आपको लूपिंग की आवश्यकता नहीं है। ऊपर आपके उदाहरण में आप बस आगे जा सकते हैं और एक jQuery चयनकर्ता का उपयोग कर सकते हैं: var $ didButton = $ ("# किया गया");
रोब

जब मैं उपरोक्त विधि (सरणी तरीका) का उपयोग करके बटन बनाने का प्रयास करता हूं, तो बटन '1' और '0' के रूप में प्रदर्शित किए जा रहे हैं, न कि 'डन' और 'कैंसिल' के रूप में। ये क्यों हो रहा है? पाठ को बटन में नहीं दिखाया जा रहा है और न ही क्लिक फ़ंक्शन को निकाल दिया जा रहा है।
हरके

1
यह मेरे लिए काम करता है और आपको लूप की आवश्यकता नहीं है। आईडी सेट करें तब तत्व तक पहुँचें: this.myDialog.dialog ("विकल्प", "बटन", [{id: "addAdapterFormOkButton", पाठ: "ठीक है", क्लिक करें: फ़ंक्शन () {}}) फिर आपको बस आवश्यकता है चयनकर्ता के साथ इसे एक्सेस करने के लिए जैसा कि वे सभी ऊपर कहते हैं: var okButt = $ ("# addAdapterFormOkButton"); okButt.addClass ( 'ui-राज्य के विकलांग'); okButt.attr ('अक्षम', सत्य);
गर्नार्ड

32

यदि आप बटनों के लिए आईडी प्रदान करने वाला एक संवाद बनाते हैं,

$("#dialog").dialog({ buttons: [ {
 id: "dialogSave",
 text: "Save",
 click: function() { $(this).dialog("close"); }
},
{
 id: "dialogCancel",
 text: "Cancel",
 click: function() { $(this).dialog("close"); 
}
}]});       

हम निम्नलिखित कोड के साथ बटन को निष्क्रिय कर सकते हैं:

$("#dialogSave").button("option", "disabled", true);

7
मैंने आपको +1 दिया है लेकिन मुझे लगता है कि बटन की संपत्ति के बजाय विधि का उपयोग करना बेहतर है: $ ("# डॉयलाग")। बटन ("अक्षम");
फरीद अलनामृती

1
हा! सबसे दूर तक! लेकिन विधि का उपयोग करें जैसा कि फरीद कहते हैं।
पापिल्लोनुकु

29

मैं नाम से बटन ढूंढने में सक्षम होना चाहता था (चूंकि मेरे jQuery UI संवाद में कई बटन हैं)। मेरे पास पृष्ठ पर कई संवाद भी हैं, इसलिए मुझे एक विशिष्ट संवाद के बटन प्राप्त करने का एक तरीका चाहिए। यहाँ मेरा कार्य है:

function getDialogButton( dialog_selector, button_name )
{
  var buttons = $( dialog_selector + ' .ui-dialog-buttonpane button' );
  for ( var i = 0; i < buttons.length; ++i )
  {
     var jButton = $( buttons[i] );
     if ( jButton.text() == button_name )
     {
         return jButton;
     }
  }

  return null;
}

// create the dialog
$('#my_dialog').dialog( dialogClass : 'dialog1',
                        buttons: {
                                   Cancel: function() { $(this).dialog('close'); },
                                   Submit: function() { ... } 
                             } );

// now programmatically get the submit button and disable it
var button = getDialogButton( '.dialog1', 'Submit' );
if ( button )
{
  button.attr('disabled', 'disabled' ).addClass( 'ui-state-disabled' );
}

अच्छा समाधान है। मैं इस समाधान का उल्लेख करूंगा, हालांकि, बटन फलक संवाद का बच्चा नहीं है - कुंजी एक अद्वितीय संवाद सेट कर रहा है, और चयनकर्ता के लिए इसका उपयोग कर रहा है। यह मुझे तब मिला जब मैं इसे देख रहा था।
रेमी डेस्प्रेस-स्माइथ

दिलचस्प है कि बटन का पाठ बटन ऑब्जेक्ट की कुंजी द्वारा सेट किया गया है। लगता है कि सीमित करने के लिए जब आप विशेषता सेट करने की आवश्यकता नहीं है। अन्यथा सरणी संस्करण बेहतर है, जहां पाठ प्रति बटन स्पष्ट रूप से सेट किया गया है।
जेरार्ड ओनील

19

यह एक बटन को निष्क्रिय करता है:

var firstButton=$('.ui-dialog-buttonpane button:first');
firstButton.addClass('ui-state-disabled');

यदि आपके पास किसी पृष्ठ पर कई संवाद हैं, तो आपको संवाद आईडी जोड़ना होगा।


11

एक बार क्लिक किए जाने के बाद बटन को निष्क्रिय करने के लिए संशोधित प्रश्न का नमूना यहां दिया गया है:

$(function() {
    $("#dialog").dialog({
        bgiframe: true,
        height: 'auto',
        width: 700,
        show: 'clip',
        hide: 'clip',
        modal: true,
        buttons: {
            'Add to request list': function(evt) {

                // get DOM element for button
                var buttonDomElement = evt.target;
                // Disable the button
                $(buttonDomElement).attr('disabled', true);

                $('form').submit();
            },
            'Cancel': function() {
                $(this).dialog('close');
            }
        }
    });
}

साथ ही, निम्नलिखित प्रश्न भी इसके साथ सहायक होंगे: मैं jQuery UI संवाद पर एक बटन को कैसे निष्क्रिय कर सकता हूं?


9

मुझे संवाद बटन पर अक्षम करने (या कोई अन्य कार्रवाई करने) का एक आसान तरीका मिला।

    var dialog_selector = "#myDialogId";

    $(dialog_selector).parent().find("button").each(function() {
        if( $(this).text() == 'Bin Comment' ) {
            $(this).attr('disabled', true);
        }
    });

आप बस अपने संवाद के जनक का चयन करें और सभी बटन खोजें। फिर अपने बटन के पाठ की जाँच, आप अपने बटन की पहचान कर सकते हैं।


9

मुझे यह काम उस विधि से मिला, .dialog("widget")जो संवाद DIV को स्वयं लौटाता है। यदि आप संवाद विधियों में हैं:

$(this)
.dialog("widget")
.find("button")
.addClass("ui-state-disabled") // for the style
.attr("disabled", true);

8

प्रयोज्यता के दृष्टिकोण से, आमतौर पर सक्षम बटन को छोड़ना बेहतर होता है लेकिन यदि कोई अधूरा फ़ॉर्म सबमिट करने का प्रयास करता है तो त्रुटि संदेश दिखा सकता है। यह मुझे पागल कर देता है जब मैं जिस बटन पर क्लिक करना चाहता हूं वह अक्षम है और ऐसा क्यों है इसका कोई सुराग नहीं है।


6

इसे इस्तेमाल करे:

$('button:eq(0)',$('#dialog_id').dialog.buttons).button('disable');

5

यहां jQuery संवाद के लिए मेरा enableOk फ़ंक्शन है:

function enableOk(enable)
{
    var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');

    if (enable) {
        dlgFirstButton.attr('disabled', '');
        dlgFirstButton.removeClass('ui-state-disabled');
    } else {
        dlgFirstButton.attr('disabled', 'disabled');
        dlgFirstButton.addClass('ui-state-disabled');
    }
}

"पहला" बटन दाईं ओर सबसे दूर है। आप दोनों बटन को अक्षम करते हैं और उचित दृश्य प्रभाव के लिए संवाद की अक्षम कक्षा सेट करते हैं।


ध्यान दें, यह मान लेता है कि आपको पृष्ठ पर केवल एक संवाद मिला है। जब से मैंने इस से निपटने के लिए पृष्ठ पर किसी भी संवाद के नाम से कोई भी बटन लाने के लिए एक फ़ंक्शन लिखा है।
रेमी Despres-Smyth

5

विरासत में jQuery यूआई (संस्करण 1.7.3) मैं बस का उपयोग करने में सक्षम था

$('.ui-dialog-buttonpane button')[0].disabled=true;

केवल DOM तत्व पर बटन को अक्षम करने के लिए। अब जब हमने नए jQuery के UI (संस्करण 1.8.7) में अपग्रेड किया है जो अब फ़ायरफ़ॉक्स में काम नहीं करता है, लेकिन मैं केवल jquery UI बटन को विशिष्ट अक्षम कह सकता हूं और बटन jquery ऑब्जेक्ट्स पर फ़ंक्शन सक्षम कर सकता हूं:

$('.ui-dialog-buttonpane button').eq(0).button('disable');

5

हाहा, बस बोतलों तक पहुँचने के लिए एक दिलचस्प तरीका मिला

$("#dialog").dialog({

      buttons: {
        'Ok': function(e) { $(e.currentTarget).button('disable'); }

      }
 });

ऐसा लगता है कि आप सभी नहीं जानते कि तर्कों में एक घटना वस्तु है ...

वैसे, यह केवल कॉलबैक के भीतर से बटन तक पहुंचता है, सामान्य मामलों में, एक्सेस के लिए एक आईडी जोड़ना अच्छा है


1
मुझे नहीं लगता कि यह काम करेगा। यह केवल बटन को निष्क्रिय करेगा जब ओके बटन द्वि क्लिक किया जाएगा।
जीन-फ्रांस्वा ब्यूचैम्प

प्रसंस्करण पूरा होने तक मुझे एक डायलॉग पर ओके बटन को निष्क्रिय करना होगा। यह पूरी तरह से काम किया।
कोडिंगॉयशी

4

यदि आप वास्तव में एक बटन को निष्क्रिय करना चाहते हैं, तो मैंने पाया कि आपको इस पर .unbind () विधि को कॉल करने की भी आवश्यकता है। अन्यथा बटन अभी भी सक्रिय हो सकता है, और एक डबल-क्लिक से कई फॉर्म सबमिशन हो सकते हैं। निम्नलिखित कोड मेरे लिए काम करता है:

button = $(this).parent().find("button:contains('OK')");
button.unbind();
button.addClass('ui-state-disabled');

4

मुझे एक वर्कअराउंड मिला जो कुछ समान करने की कोशिश कर रहे लोगों पर लागू हो सकता है। बटन को निष्क्रिय करने के बजाय मैंने एक साधारण रखाif फ़ंक्शन में चेकबॉक्स चेक किया गया था, यह जांचने के लिए विवरण ।

यदि ऐसा नहीं था, तो यह एक सरल संदेश प्रदर्शित करता है जिसमें कहा जाता है कि बॉक्स को जमा करने से पहले जांचना होगा।

उदाहरण के लिए:

$("#confirmation-dialog").dialog({
    modal: true,
    autoOpen: false,
    width: 600,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    close: function() {
        $('input[type="submit"]')
      .val('Record Reading')
      .attr('disabled', false);
    },
    buttons: {
        'Confirm Reading': function() {
            if($('#check-box').attr("checked")){
                $(this).dialog('close')
                $('form')
                .addClass('confirmed')
                .submit();
            }
            else {
                $('#please-check').show("slide");
            }
        }
    }
});

वैसे भी, मुझे आशा है कि किसी की मदद करता है।


4

मैंने इस कार्य को थोड़ा आसान बनाने के लिए एक jQuery फ़ंक्शन बनाया। बस इसे अपनी जावास्क्रिप्ट फ़ाइल में जोड़ें:

$.fn.dialogButtons = function(name, state){
var buttons = $(this).next('div').find('button');
if(!name)return buttons;
return buttons.each(function(){
    var text = $(this).text();
    if(text==name && state=='disabled') {$(this).attr('disabled',true).addClass('ui-state-disabled');return this;}
    if(text==name && state=='enabled') {$(this).attr('disabled',false).removeClass('ui-state-disabled');return this;}
    if(text==name){return this;}
    if(name=='disabled'){$(this).attr('disabled',true).addClass('ui-state-disabled');return buttons;}
    if(name=='enabled'){$(this).attr('disabled',false).removeClass('ui-state-disabled');return buttons;}
});};

क्लास 'डायलॉग' के साथ डायलॉग पर 'ओके' को डिसेबल करें:

$('.dialog').dialogButtons('Ok', 'disabled');

सभी बटन सक्षम करें:

$('.dialog').dialogButtons('enabled');

'बंद' बटन सक्षम करें और रंग बदलें:

$('.dialog').dialogButtons('Close', 'enabled').css('color','red');

आशा है कि ये आपकी मदद करेगा।


3

दुर्भाग्य से यहाँ दिए गए किसी भी समाधान ने पृष्ठ पर कई संवादों के लिए काम नहीं किया।

इसके अलावा समस्या यह थी कि मूल संवाद में अपने आप में बटन फलक नहीं है, लेकिन यह एक भाई-बहन है।

तो मैं इस तरह से डायलॉग आईडी चुनकर आया:

        var getFirstDialogButton = function (dialogSelector) {
            return $('.ui-dialog-buttonpane button:first',
                    $(dialogSelector).parent()[0]);
        };

...

        $('#my_dialog').dialog({
            open: function(event, ui) {
                getFirstDialogButton("#my_dialog")
                 .addClass("ui-state-disabled").attr('disabled', 'disabled' );
            },

...

और फिर वही getFirstDialogButton () फ़ंक्शन का उपयोग बाद में बटन को सक्षम करने के लिए किया जा सकता है, जैसे सफल सत्यापन के बाद।

आशा है कि यह किसी की मदद कर सकता है।


3

यहाँ एक उदाहरण है कि मैंने सिर्फ बटन असाइन करने की एरे विधि का उपयोग करके लागू किया है, जो मुझे बाद में आईडी चयनकर्ताओं का उपयोग करने की अनुमति देता है - जैसा कि मूल रूप से स्वीकार किए गए उत्तर के रूप में - बटन को अक्षम / अक्षम करने और यहां तक ​​कि उन्हें पूरी तरह से दिखाने / छिपाने के लिए। करते हुए।

$( "#dialog-form" ).dialog({
autoOpen: true,
height: 500,
width: 450,
modal: true,
buttons: [
{
    id: "submit_btn",
    text: "Make Apointment",
    click: function() { 
        //do ajax       
    }       
},
{
    id: "cancel_btn",
    text: "Cancel",
    click: function() {
       $( this ).dialog( "close" );
    }
},
{
    id: "ok_btn",
    text: "OK",
    click: function() {
       $( this).dialog('close');
    },
    disabled: "disabled"
}],
close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
}
});

सफलतापूर्वक सबमिट करने के बाद, मैं दो बटनों को अक्षम और छिपाता हूं और डिफ़ॉल्ट रूप से अक्षम किए गए ओके बटन को सक्षम करता हूं।

$('#submit_btn, #cancel_btn').attr('disabled','disabled').addClass('ui-state-disabled').hide();
$('#ok_btn').attr('disabled','').removeClass('ui-state-disabled').show();

उम्मीद है की यह मदद करेगा।


3

मैंने निक के समान एक फ़ंक्शन बनाया, लेकिन मेरे तरीके को डायलॉगक्लास को सेट करने की आवश्यकता नहीं होगी और आप आईडी के माध्यम से एक विशिष्ट संवाद के बटन प्राप्त कर सकेंगे (यदि आपके आवेदन में एक से अधिक मौजूद हैं)

function getDialogButton( dialog_id, button_name) {
    var target = '#'+dialog_id;
    var buttons = $(target).parent().find('button');
    for ( var i=0; i<buttons.length; ++i ) {
        var jButton = $( buttons[i] );
        if ( jButton.text() == button_name ) {
              return jButton;
        }
    }
    return null;
} 

तो अगर आपने संवाद को इस तरह बनाया है:

$(function() {
    $("#myDialogBox").dialog({

      bgiframe: true, height: 'auto', width: 700, modal: true,
      buttons: {
        'Add to request list': function() {
                                     $(this).dialog('close');
                                     $('form').submit();
                               },
        'Cancel': function() {
                       $(this).dialog('close');
                  }
      }
});

आप निम्न कार्य करके बटन प्राप्त कर सकते हैं:

var addToRequestListBtn = getDialogButton('myDialogBox','Add to request list');
var cancelBtn           = getDialogButton('myDialogBox','Cancel');

निष्क्रिय करने के लिए:

addToRequestListBtn.attr('disabled', true).addClass( 'ui-state-disabled');
          cancelBtn.attr('disabled', true).addClass( 'ui-state-disabled');

सक्षम करने के लिए:

addToRequestListBtn.attr('disabled', false).removeClass( 'ui-state-disabled');
          cancelBtn.attr('disabled', false).removeClass( 'ui-state-disabled');

3

सिर्फ रिकॉर्ड के लिए, इस पोस्ट ने मुझे मेरी समस्या को हल करने में मदद की। कम शब्दों में, आपको अक्षम करने के लिए अक्षम विशेषता को सेट करना होगा, न कि झूठे को:

_send_button.attr('disabled','disabled');

यह सभी कोड दिखता है, मैंने इसे निष्क्रिय करने के लिए कुछ शैलियों को भी जोड़ा:

var _send_button = $('.ui-dialog-buttonpane button:contains(Send)');
var original_text = _send_button.text();
_send_button.text('Please wait...');
_send_button.addClass('ui-state-disabled');
_send_button.attr('disabled','disabled');
_send_button.fadeTo(500,0.2);

3

मुझे लगता है कि इसे सभी के साथ काम करना चाहिए,

<script type="text/javascript">
    $(document).ready(function() {
        $('#dialog').dialog('open');
        $(function(){
            $('#dialog').dialog({
                autoOpen: true,
                width: 400,
                modal: true,
                overlay: {
                    opacity: 0.8,
                    background: "black"
                },
                resizable: false,
                show: 'slow',
                buttons: {
                    //"OK":function() {
                    //    window.location="index.php?view=list";
                    //},
                    "Cancel": function() {
                        $(this).dialog("close");
                        $(this).attr("class", "button");
                    }
                }
            });

            var dlgFirstButton = $('.ui-dialog-buttonpane').find('button:first');
            dlgFirstButton.addClass('button');
        });
    });
</script>

2

मेरे डायलॉग बॉक्स में सेव बटन को डिसेबल करने के लिए अपने फंक्शन में निम्न लाइन का उपयोग करें।

$(".ui-dialog-buttonpane button:contains('Save')").attr("disabled", true).addClass("ui-state-disabled");

निम्नलिखित पंक्ति में एक बटन का उपयोग करने के लिए एक पाठ बदलने के लिए (यह मुझे रद्द करने के लिए रद्द करें बटन पाठ बदलें)

 $(".ui-dialog-buttonpane button:contains('Cancel') span").text("Close Me");

1

@ क्रिस आप अपने चेक बॉक्स की जांच / अनियंत्रित होने तक संवाद बटन को सक्षम / अक्षम करने के लिए कोड की निम्नलिखित पंक्तियों का उपयोग कर सकते हैं

<div id="dialog-confirm" title="test">
    <label>Enable Confirm?<input type="checkbox" checked /></label>
</div>

    $("#dialog-confirm").dialog({
    resizable: false,
    height:240,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        },
        'Confirm': function() {
            $(this).dialog('close');
        }
    }
});

    $("#dialog-confirm :checkbox").change(function() {
        $(".ui-dialog-buttonpane button:contains('Confirm')")
           .button(this.checked ? "enable" : "disable");
    });

मूल स्रोत: http://jsfiddle.net/nick_craver/rxZPv/1/


1

कॉलिंग .attr("disabled", true)पाठ्यक्रम काम करता है के लिए, लेकिन jQuery का उपयोग कर आप अधिक 'चीनी' तरीके से करना चाहते हैं तो मैं सरल विस्तार लिखा है:

(function( $ ) {
  $.fn.disable = function(isDisabled) {
    var val = isDisabled;
    if (isDisabled === undefined)
        val = true;
    this.attr("disabled", val);
  };
  $.fn.enable = function(isEnabled) {
    var val = !isEnabled;
    if (isEnabled === undefined)
        val = false;
    this.attr("disabled", val); 
  }
})( jQuery );

अब आपके पास कार्य हैं enable()और disable()आप अपना काम इस तरह से कर सकते हैं:

$('#continueButton').disable();

जो समान है

$('#continueButton').disable(true);

तथा

$('#continueButton').enable(false);


1

JQuery की दुनिया में, यदि आप DOM तत्वों के सेट से ऑब्जेक्ट का चयन करना चाहते हैं, तो आपको eq () का उपयोग करना चाहिए

उदाहरण:

var बटन = $ ('बटन')। eq (1);

या

var बटन = $ ('बटन: eq (1)');


1

प्रलेखन के अनुसार :

https://api.jqueryui.com/dialog/#option-buttons

// Setter
$( ".selector" ).button( "option", "disabled", true );

बस बटन का चयन करने में सक्षम होने के लिए, आप बटन में एक ही सीएसएस वर्ग जोड़ सकते हैं, जिसे सक्षम / अक्षम किया जाना चाहिए।

// while initializing
$("#dialog").dialog({
...
buttons: [{
    disabled: true,
    text: "Add to request list",
    click: function (e: JQueryEventObject) {
        // Some logic
    },
    "class": "myDialogButton"
}]
...
});

तब सक्षम / अक्षम इस तरह दिखेगा:

$(".myDialogButton" ).button( "option", "disabled", (SOME_CONDITION) ? true : false);

0

अगर किसी को क्लिक करने पर लोडिंग एनीमेशन जैसे किसी बटन को प्रतिस्थापित करना दिख रहा है (उदाहरण के लिए जब "सबमिट करें" बटन संवाद में फ़ॉर्म सबमिट करता है) - आप इस तरह से अपनी छवि के साथ बटन को बदल सकते हैं:

...
buttons: {
    "Submit": function(evt) {
        $(evt.target).closest('button').replaceWith('<img src="loading.gif">');
    }
}

jQuery प्रतिस्थापन डॉक्स


0

एक बटन को निष्क्रिय करने के लिए, संवाद खोलें:

$("#InspectionExistingFacility").dialog({
    autoOpen: false, modal: true, width: 700, height: 550,
    open: function (event, ui) {
        $("#InspectionExistingFacility").parent().find(":button:contains('Next')").prop("disabled", true).addClass("ui-state-disabled");
    },
    show: { effect: "fade", duration: 600 }, hide: { effect: "slide", duration: 1000 },
    buttons: { 'Next step': function () { }, Close: function () { $(this).dialog("close"); } }
});
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.