मैं jQuery UI संवाद पर एक बटन को कैसे निष्क्रिय कर सकता हूं?

Question

मैं jQuery UI संवाद पर एक बटन को अक्षम करने के बारे में कैसे जाना है । मैं ऊपर दिए गए लिंक में किसी भी प्रलेखन में यह पता नहीं लगा सकता।

मेरे पास मोडल कन्फर्मेशन ("कन्फर्म" और "कैंसल") पर 2 बटन हैं। कुछ मामलों में, मैं "कन्फर्म" बटन को निष्क्रिय करना चाहता हूं।

Comments

इस सूत्र में उत्तर देखें: stackoverflow.com/questions/577548/…

— Erik

@ एरिक - उन उत्तरों के बाद से स्थिति थोड़ी बदल गई है, अर्थात् .button()प्लगइन के कारण, इसलिए वे अब सबसे अच्छा / सबसे अच्छे समाधान नहीं हैं।

— निक Craver

Answer 1

यदि आप उस .button()प्लगइन / विजेट को शामिल कर रहे हैं जिसमें jQuery UI शामिल है (यदि आपके पास पूर्ण पुस्तकालय है और 1.8+ पर है, तो आपके पास है), आप बटन को निष्क्रिय करने और राज्य को नेत्रहीन रूप से अपडेट करने के लिए इसका उपयोग कर सकते हैं , जैसे:

$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");

आप इसे यहाँ आज़मा सकते हैं ... या यदि आप पुराने संस्करण पर हैं या बटन विजेट का उपयोग नहीं कर रहे हैं, तो आप इसे इस तरह से अक्षम कर सकते हैं:

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

---

यदि आप इसे किसी विशिष्ट संवाद के अंदर चाहते हैं, तो ID से कहें, तो यह करें:

$("#dialogID").next(".ui-dialog-buttonpane button:contains('Confirm')")
              .attr("disabled", true);

अन्य मामलों में जहां :contains()आप झूठी सकारात्मकता दे सकते हैं .filter(), तो आप इस तरह का उपयोग कर सकते हैं , लेकिन जब से आप अपने दो बटन जानते हैं, तब यह यहां ओवरकिल है। यदि अन्य स्थितियों में ऐसा है, तो यह इस तरह दिखेगा:

$("#dialogID").next(".ui-dialog-buttonpane button").filter(function() {
  return $(this).text() == "Confirm";
}).attr("disabled", true);

यह :contains()किसी अन्य चीज़ के विकल्प से मेल खाने से रोकता है।

Comments

अगले () मेरे लिए काम नहीं करेगा, क्योंकि संवाद और बटनपट्टी के बीच सभी "resizable" div है। इसलिए मैंने नेक्स्ट () का इस्तेमाल किया, और बटन को बटन से अलग किया:$("#dialogID").nextAll(".ui-dialog-buttonpane").find("button:contains('Confirm')").attr("disabled", true).addClass("ui-state-disabled");

— मैथ्यू

ध्यान दें कि बटन फलक डायलॉग कंटेनर का बच्चा नहीं होने के कारण आपके मुद्दे हो सकते हैं यदि आपका पृष्ठ कई संवादों को परिभाषित करता है।

— ब्रेट रायन

इसके साथ उत्कृष्ट समाधान $(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");हालांकि यदि आप इसके लिए किसी फ़ंक्शन से बटन को अक्षम करना चाहते हैं, तो आपको उस संवाद को विजेट करना होगा और उसके बाद बटन को अक्षम करना होगा; इस तरह$(this).dialog("widget").find(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");

— मेरिडियस सेप

ध्यान दें कि यदि आप इसके टेक्स्ट द्वारा वांछित बटन को क्वेरी नहीं करना चाहते हैं, तो आप बटन को एक क्लास भी दे सकते हैं; jQuery के यूआई संवाद बटन विकल्प के लिए ऑब्जेक्ट के साथ एक सरणी का समर्थन करता है, प्रत्येक ऑब्जेक्ट जिसमें बटन विशेषताओं के बारे में जानकारी होती है।

— डेनिस

इसने मेरे लिए काम किया: $ (यह)।। विकलांग ");

— एड्रियन पी।

Answer 2

किसी को भी, इस जुड़े हुए प्रश्न में भी लगता है, इस समाधान का प्रस्ताव किया है, निक क्रेवर द्वारा दिए गए उत्तर के पहले भाग के समान:

$("#dialog").dialog({
    width: 480,
    height: "auto",
    buttons: [
        {
            id: "button-cancel",
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        },
        {
            id: "button-ok",
            text: "Ok",
            click: function() {
                $(this).dialog("close");
            }
        }
    ]
});

फिर, कहीं और, आपको jQuery UI बटन के लिए एपीआई का उपयोग करने में सक्षम होना चाहिए :

$("#button-ok").button("disable");

Comments

+1। मुझे यकीन नहीं है कि इस जवाब को अधिक वोट क्यों नहीं मिले हैं। यह सबसे साफ है जो मैं भर में आया हूं और अच्छी तरह से काम करता हूं।

— डग विल्सन

यह डॉक्स में होना चाहिए ... यह भी नहीं दिखाता है कि आप बटनों को आईडी असाइन कर सकते हैं।

— जे के

यह एक शक के बिना सबसे अच्छा जवाब है। वहाँ अन्य समाधान है कि यह चयनकर्ताओं गलत है कि का उपयोग कर बटन के लिए खोज कर रहे हैं। अच्छा काम निकोला!

— jnoreiga

सहमत: यह वह उपाय है जो मैं सोच रहा था कि UI टीम को लागू करना चाहिए ...: +) आप और भी जल्दी कर सकते हैं:{text:"ok",disabled:true,click: function(){}}

— Matthieu

यह भी खूब रही! यदि आप आईडी के विशिष्ट होने के बारे में चिंतित हैं तो आप "आईडी" के बजाय "क्लास" का उपयोग कर सकते हैं। हालाँकि आपको बटन को खोजने के लिए थोड़ा और लिखना होगा:$("#dialog").dialog("widget").find(".button-ok-class").button("enable")

— desm

Answer 3

तुम भी अब प्रलेखित विशेषता का उपयोग नहीं कर सकते हैं disabled:

$("#element").dialog({
    buttons: [
    {
        text: "Confirm",
        disabled: true,
        id: "my-button-1"
    }, 
    {
        text: "Cancel",
        id: "my-button-2",
        click: function(){            
               $(this).dialog("close");
        }  

    }]
});

संवाद खुलने के बाद सक्षम करने के लिए, उपयोग करें:

$("#my-button-1").attr('disabled', false);

JsFiddle: http://jsfiddle.net/xvt96e1p/4/

Comments

ऐसा नहीं है कि यह अनिर्दिष्ट है। यह है कि जब बटन को संसाधित किया जाता है, तो ऑब्जेक्ट से सभी गुण उनके jQuery के संपत्ति के बराबर निष्पादित होते हैं। उदाहरण के लिए, आप जोड़ सकते हैं attr: { 'data-value' : 'some value here' }यदि आप data-valueबटन में विशेषता जोड़ना चाहते थे ।

— कुचलने

अब और अनैच्छिक नहीं। यह आधिकारिक है।

— सलमान ए

यह समाधान अधिक लोकप्रिय संस्करण की तुलना में बहुत अधिक सुरुचिपूर्ण है। यह आपको योनि परिभाषित चयनकर्ताओं की समस्या के बिना सभी लचीलेपन की अनुमति देता है।

— KimvdLinde

ध्यान दें कि disabledबटन बनाते समय विशेषता को निर्दिष्ट किया जाना चाहिए।

— user1032531

नीचे जाने की कोशिश की, लेकिन मैं 4 घंटे पहले उखाड़ा और ऐसा नहीं कर सकता। यह समाधान अब ठीक से काम नहीं करता है।

— user1032531

Answer 4

बटन क्लिक करने के बाद से निम्नलिखित काम करता है:

$(function() {
    $("#dialog").dialog({
        height: 'auto', width: 700, 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');
            }
        }
    });
}

Comments

लेकिन तब आपको क्लिक करने से पहले क्लिक करना होगा।

— मैट

Answer 5

एक बटन कक्षा द्वारा पहचाना जाता है ui-button। एक बटन को निष्क्रिय करने के लिए:

$("#myButton").addClass("ui-state-disabled").attr("disabled", true);

जब तक आप गतिशील रूप से संवाद (जो संभव है) बना रहे हैं, आपको बटन की स्थिति का पता चल जाएगा। तो, पहले बटन को निष्क्रिय करने के लिए:

$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled", true);

ui-state-disabledवर्ग क्या एक बटन है कि अच्छा मंद कर शैली देता है।

Answer 6

मैंने इस कार्य को थोड़ा आसान बनाने के लिए एक jQuery फ़ंक्शन बनाया। शायद अब एक बेहतर समाधान है ... किसी भी तरह, यहाँ मेरे 2cents है। :)

बस इसे अपनी JS फाइल में जोड़ें:

$.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');

सभी बटन लाल पर पाठ:

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

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

Answer 7

function getDialogButton( jqUIdialog, button_names )
{
    if (typeof button_names == 'string')
        button_names = [button_names];
    var buttons = jqUIdialog.parent().find('.ui-dialog-buttonpane button');
    for (var i = 0; i < buttons.length; i++)
    {
        var jButton = $( buttons[i] );
        for (var j = 0; j < button_names.length; j++)
            if ( jButton.text() == button_names[j] )
                return jButton;
    }

    return null;
}

function enableDialogButton( jqUIdialog, button_names, enable )
{
    var button = getDialogButton( jqUIdialog, button_names );
    if (button == null)
        alert('button not found: '+button_names);
    else
    {
        if (enable)
            button.removeAttr('disabled').removeClass( 'ui-state-disabled' );
        else
            button.attr('disabled', 'disabled').addClass( 'ui-state-disabled' );
    }
}

Answer 8

आप बटन सरणी को ओवरराइट कर सकते हैं और केवल उन लोगों को छोड़ सकते हैं जिनकी आपको आवश्यकता है।

$( ".selector" ).dialog( "option", "buttons", [{
    text: "Close",
    click: function() { $(this).dialog("close"); }
}] );

Answer 9

इस कोड को 'your_BUTTON_LABEL' बटन को निष्क्रिय कर दें। आप में शामिल नाम बदल सकते हैं ()। निष्क्रिय करने के लिए

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("disable");

अपने बटन के लेबल के साथ 'Your_BUTTON_LABEL' को बदलें। सक्षम करने के लिए

$(".ui-dialog-buttonpane button:contains('YOUR_BUTTON_LABEL')").button("enable");

Answer 10

आप उदाहरण के लिए पहला बटन अक्षम करने के लिए ऐसा कर सकते हैं:

$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');

Answer 11

जिस तरह से मैं यह कर रहा हूँ Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

यह सबसे छोटा और सबसे आसान तरीका है जो मैंने पाया।

Answer 12

यदि आप नॉकआउट का उपयोग कर रहे हैं, तो यह भी क्लीनर। कल्पना कीजिए कि आपके पास निम्नलिखित हैं:

var dialog = $('#my-dialog').dialog({
    width: '100%',
    buttons: [
        { text: 'Submit', click: $.noop, 'data-bind': 'enable: items() && items().length > 0, click: onSubmitClicked' },
        { text: 'Enable Submit', click: $.noop, 'data-bind': 'click: onEnableSubmitClicked' }
    ]
});

function ViewModel(dialog) {
    var self = this;

    this.items = ko.observableArray([]);

    this.onSubmitClicked = function () {
        dialog.dialog('option', 'title', 'On Submit Clicked!');
    };

    this.onEnableSubmitClicked = function () {
        dialog.dialog('option', 'title', 'Submit Button Enabled!');
        self.items.push('TEST ITEM');
        dialog.text('Submit button is enabled.');
    };
}

var vm = new ViewModel(dialog);
ko.applyBindings(vm, dialog.parent()[0]); //Don't forget to bind to the dialog parent, or the buttons won't get bound.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div id="my-dialog">
  Submit button is disabled at initialization.
</div>

जादू jQuery UI स्रोत से आता है :

$( "<button></button>", props )

आप मूल रूप से बटन ऑब्जेक्ट के माध्यम से इसे पारित करके किसी भी jQuery उदाहरण फ़ंक्शन को कॉल कर सकते हैं।

उदाहरण के लिए, यदि आप HTML का उपयोग करना चाहते हैं:

{ html: '<span class="fa fa-user"></span>User' }

या, यदि आप बटन में एक वर्ग जोड़ना चाहते हैं (आप इसे कई तरीके से कर सकते हैं):

{ addClass: 'my-custom-button-class' }

हो सकता है कि आप पागल हों, और होवर होने पर आप बटन को डोम से हटाना चाहते हैं:

{ mouseover: function () { $(this).remove(); } }

---

मैं वास्तव में आश्चर्यचकित हूं कि ऐसा प्रतीत नहीं होता है कि इस तरह की अनगिनत संख्याओं में इसका उल्लेख किया गया है ...

Answer 13

यह मेरे लिए काम किया -

$("#dialog-confirm").html('Do you want to permanently delete this?');
$( "#dialog-confirm" ).dialog({
    resizable: false,
    title:'Confirm',
    modal: true,
    buttons: {
        Cancel: function() {
            $( this ).dialog( "close" );
        },
        OK:function(){
            $('#loading').show();
            $.ajax({
                    type:'post',
                    url:'ajax.php',
                    cache:false,
                    data:{action:'do_something'},
                    async:true,
                    success:function(data){
                        var resp = JSON.parse(data);
                        $("#loading").hide();
                        $("#dialog-confirm").html(resp.msg);
                        $( "#dialog-confirm" ).dialog({
                                resizable: false,
                                title:'Confirm',
                                modal: true,
                                buttons: {
                                    Close: function() {
                                        $( this ).dialog( "close" );
                                    }
                                }
                        });
                    }
                });
        }
    }
}); 

Answer 14

जब आप संवाद बनाते हैं तो आप एक बटन को निष्क्रिय कर सकते हैं:

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, disabled: true },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Proceed?</p>
</div>

या संवाद बनने के बाद आप इसे कभी भी निष्क्रिय कर सकते हैं:

$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, "class": "confirm" },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
  setTimeout(function() {
    $("#dialog").dialog("widget").find("button.confirm").button("disable");
  }, 2000);
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Button will disable after two seconds.</p>
</div>