আমি কীভাবে jQuery UI ডায়ালগের একটি বোতাম অক্ষম করতে পারি?

143

আমি কীভাবে jQuery UI ডায়ালগের একটি বোতাম অক্ষম করতে পারি । আমি উপরের লিঙ্কটিতে কোনও ডকুমেন্টেশনে এটির সন্ধান করতে পারছি না।

মডেল কনফার্মেশনটিতে আমার কাছে 2 টি বোতাম রয়েছে ("নিশ্চিত করুন" এবং "বাতিল করুন")। কিছু কিছু ক্ষেত্রে, আমি "কনফার্ম" বোতামটি অক্ষম করতে চাই।

jquery jquery-ui jquery-ui-dialog

— লেওড়া
সূত্র

এই থ্রেডে উত্তরগুলি দেখুন: stackoverflow.com/questions/577548/…

— এরিক

5

@ এরিক - .button()প্লাগইনটির কারণে এই উত্তরগুলির পরে পরিস্থিতি কিছুটা বদলেছে , সুতরাং তারা আর সর্বোত্তম / পরিষ্কার সমাধানের প্রয়োজন হয় না।

— নিক Craver

158

আপনি যদি jQuery UI- তে থাকা .button()প্লাগইন / উইজেটটি অন্তর্ভুক্ত করে থাকেন (যদি আপনার কাছে পূর্ণ লাইব্রেরি রয়েছে এবং আপনি যদি 1.8+ তে থাকেন তবে আপনি এটি ব্যবহার করতে পারেন) বোতামটি অক্ষম করতে এবং দৃশ্যত এই অবস্থাটি আপডেট করতে:

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

আপনি এখানে চেষ্টা করে দেখতে পারেন ... বা আপনি যদি কোনও পুরানো সংস্করণে আছেন বা বোতাম উইজেটটি ব্যবহার করছেন না, আপনি এটি এটি অক্ষম করতে পারেন:

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

যদি আপনি এটি কোনও নির্দিষ্ট কথোপকথনের ভিতরে চান, আইডি দিয়ে বলুন, তবে এটি করুন:

$("#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()অন্য কোনও কিছুর সাথে স্ট্রিংয়ের সাথে মেলে আটকাবে ।

— নিক ক্র্যাভার
সূত্র

পরবর্তী () আমার পক্ষে কাজ করবে না, কারণ ডায়ালগ এবং বোতামের মধ্যে সমস্ত "আকার পরিবর্তনযোগ্য" বিভাজন রয়েছে। তাই আমি nextAll () ব্যবহার করা হয়, এবং বাটন থেকে buttonPan আলাদা:

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

— Matthieu

নোট করুন যে ডায়ালগ ধারকটির বাচ্চা না হওয়ার কারণে বোতামের কারণে আপনার পৃষ্ঠা একাধিক ডায়ালগ সংজ্ঞায়িত করে সমস্যা হতে পারে।

— ব্রেট রায়ান

সঙ্গে চমৎকার সমাধান $(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");যদিও আপনি একটি ফাংশন আপনি এটি জন্য আছে থেকে বোতাম অক্ষম করতে চান, আপনি আছে widgetize যে ডায়ালগ এবং এর পর বোতাম অক্ষম; $(this).dialog("widget").find(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");

— এটির

3

মনে রাখবেন যে আপনি যদি এটির পাঠ্য অনুসারে পছন্দসই বোতামটি জিজ্ঞাসা করতে না চান তবে আপনি বাটনটিতে একটি ক্লাসও দিতে পারেন; jQuery UI- এর ডায়ালগ বোতামের বিকল্পগুলির জন্য বস্তুর সাথে একটি অ্যারে সমর্থন করে, প্রতিটি বস্তুতে বোতামের বৈশিষ্ট্যগুলি সম্পর্কিত তথ্য রয়েছে।

— ডেনিস

এটি আমার জন্য কাজ করেছে: $ (এটি) .ক্লোস্ট ("। ইউআই-সংলাপ")। সন্ধান করুন ("বোতাম: ('সংরক্ষণ করুন')")। অক্ষম ");

— অ্যাড্রিয়ান পি।

217

দেখে মনে হচ্ছে, এই লিঙ্কযুক্ত প্রশ্নেও কেউ কেউ এই সমাধানটি প্রস্তাব করেছেন, নিক ক্র্যাভারের দেওয়া উত্তরের প্রথম অংশের মতো:

$("#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 বোতামের জন্য API ব্যবহার করতে সক্ষম হওয়া উচিত :

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

— নিকোলা টুভেরি
সূত্র

15

+1 টি। আমি নিশ্চিত নই কেন এই উত্তরটি বেশি ভোট পেল না। আমি পরিচ্ছন্ন হয়ে এসেছি এবং সুন্দরভাবে কাজ করছি।

— ডগ উইলসন

38

এটি ডক্সে থাকা দরকার ... এটি এমনকি দেখায় না যে আপনি বোতামগুলিতে কোনও আইডি নির্ধারণ করতে পারবেন।

— জে কে

1

এটি নিঃসন্দেহে সেরা উত্তর। সেখানে অন্যান্য সমাধান রয়েছে যা ভুল বা নির্বাচকদের ব্যবহার করে বোতামটি অনুসন্ধান করে এটি করে। ভাল চাকরি নিকোলা!

— jnoreiga

4

সম্মত হন: এটিই আমি ভাবছিলাম যে ইউআই দলের বাস্তবায়ন করা উচিত ...: +) আপনি আরও দ্রুত করতে পারেন:{text:"ok",disabled:true,click: function(){}}

— ম্যাথিউ

10

এটা অসাধারণ! আপনি আইডিটি অনন্য হওয়ার বিষয়ে উদ্বিগ্ন হয়ে থাকলে আপনি "আইডি" এর পরিবর্তে "শ্রেণি "ও ব্যবহার করতে পারেন। যদিও আপনাকে বোতামটি সন্ধান করতে আরও কিছুটা টাইপ করতে হবে:$("#dialog").dialog("widget").find(".button-ok-class").button("enable")

— দেশ

49

এছাড়াও আপনি ব্যবহার করতে পারেন না এখন নথিভুক্ত 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);

জেএসফিডাল: http://jsfiddle.net/xvt96e1p/4/

— জেরোম
সূত্র

এটি এমন নয় যে এটি অনিবন্ধিত। এটি হ'ল যখন বোতামগুলি প্রক্রিয়া করা হয়, বস্তু থেকে সমস্ত বৈশিষ্ট্যগুলি তাদের jQuery সম্পত্তি সমতুল্যের বিরুদ্ধে কার্যকর করা হয়। উদাহরণস্বরূপ, আপনি attr: { 'data-value' : 'some value here' }যদি data-valueবোতামটিতে বৈশিষ্ট্যটি যুক্ত করতে চান তবে আপনি যুক্ত করতে পারেন ।

— পিষ্ট করুন

2

আর ডকুমেন্টেড নয়। এটি সরকারী

— সালমান এ

এই সমাধানটি আরও জনপ্রিয় সংস্করণের চেয়ে অনেক বেশি মার্জিত। এটি আপনাকে সাবলীলভাবে সংজ্ঞায়িত নির্বাচকদের সমস্যা ছাড়াই সমস্ত নমনীয়তার অনুমতি দেয়।

— কিমভিডিলিন্ডে

নোট করুন যে disabledবোতামগুলি তৈরি করার সময় অ্যাট্রিবিউটটি অবশ্যই নির্ধারিত হবে।

— ব্যবহারকারী 1032531

ডাউনভোট করার চেষ্টা করেছি, তবে আমি 4 ঘন্টা আগে আপগ্রেড করেছি এবং এটি করতে পারছি না। এই সমাধানটি আর সঠিকভাবে কাজ করে না বলে মনে হয়।

— ব্যবহারকারী 1032531

7

বোতাম ক্লিক ফাংশন থেকে নিম্নলিখিত কাজ করে:

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

— ক্রিস পিটসমান
সূত্র

তবে তারপরে গ্রেড হওয়ার আগে আপনাকে ক্লিক করতে হবে।

— ম্যাট

1

ক্লাস দ্বারা চিহ্নিত একটি বোতাম ui-button। একটি বোতাম অক্ষম করতে:

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

আপনি গতিশীলভাবে ডায়ালগটি তৈরি না করে (যা সম্ভব) আপনি বোতামের অবস্থানটি জানতে পারবেন। সুতরাং, প্রথম বোতামটি অক্ষম করতে:

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

ui-state-disabledবর্গ কি একটি বাটন যে চমৎকার অস্পষ্ট শৈলী দেয়।

— ক্রিস ল্যাপ্লেন্ট
সূত্র

1

এই কাজটি কিছুটা সহজ করার জন্য আমি একটি jQuery ফাংশন তৈরি করেছি। সম্ভবত এখন আরও একটি ভাল সমাধান আছে ... যেভাবেই হোক, এখানে আমার 2 সেন্সেন্ট। :)

আপনার জেএস ফাইলটিতে এটি কেবল যুক্ত করুন:

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

আশাকরি এটা সাহায্য করবে :)

— sergiodlopes
সূত্র

1

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

— রনি শেরের
সূত্র

1

আপনি বাটনগুলি অ্যারে ওভাররাইট করতে পারেন এবং কেবল আপনার প্রয়োজনীয় জিনিসগুলি রেখে যেতে পারেন।

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

— jfredys
সূত্র

1

এই কোডটি '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");

— Sumeet_Pol
সূত্র

0

আপনি উদাহরণস্বরূপ প্রথম বোতামটি অক্ষম করতে এটি করতে পারেন:

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

— দারিন দিমিত্রভ
সূত্র

0

আমি যেভাবে এটি করি Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

এটি আমার কাছে সবচেয়ে সংক্ষিপ্ততম এবং সহজতম উপায়।

— Bhavin
সূত্র

0

আপনি যদি নকআউট ব্যবহার করছেন তবে এটি আরও পরিষ্কার। আপনার নিম্নলিখিতটি কল্পনা করুন:

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: '<span class="fa fa-user"></span>User' }

বা, আপনি যদি বোতামটিতে কোনও শ্রেণি যুক্ত করতে চান (আপনি এটি একাধিক উপায়ে করতে পারেন):

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

হতে পারে আপনি বাদাম হয়ে গেছেন এবং যখন এটি জড়িয়ে পড়ে তখন আপনি ডোম থেকে বোতামটি সরাতে চান:

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

আমি সত্যিই অবাক হয়েছি যে এরকম অসংখ্য থ্রেডে কেউ এর উল্লেখ করেছে বলে মনে হয় না ...

— পিষা
সূত্র

0

এটি আমার পক্ষে কাজ করেছে -

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

— প্রমোদ কুমার
সূত্র

0

আপনি যখন ডায়ালগটি তৈরি করেন আপনি একটি বোতামটি অক্ষম করতে পারেন:

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

স্নিপেট প্রসারিত করুন

— সালমান আ
সূত্র