কোনও ফাংশন থেকে আমি কীভাবে jQuery ডায়ালগের একটি বোতাম অক্ষম করতে পারি?

Question

আমার কাছে একটি jQuery ডায়ালগ রয়েছে যা ব্যবহারকারীর নির্দিষ্ট কিছু তথ্য প্রবেশের প্রয়োজন। এই ফর্মটিতে আমার একটি "চালিয়ে" বোতাম আছে। আমি এই "চালিয়ে" বাটনটি কেবলমাত্র সমস্ত ক্ষেত্রের মধ্যে সামগ্রী রেখে দিলে কেবল সক্ষম করা চাই else অন্যথায় এটি অক্ষম থাকবে।

আমি এমন একটি ফাংশন লিখেছিলাম যা বলা হয় প্রতিবার একটি ক্ষেত্রের স্থিতি পরিবর্তিত হয়। তবে এই ফাংশনটি থেকে কীভাবে ডায়ালগ বোতামটি সক্ষম ও অক্ষম করবেন তা আমি জানি না। আমার কি করা উচিৎ?

উফ এবং আমি উল্লেখ করতে ভুলে গেছি যে এই বোতামগুলি নীচে তৈরি হয়েছিল:

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

Comments

এখানে একটি ভাল উত্তর রয়েছে: stackoverflow.com/questions/3646408/…

— আমির

আমি এই বেশ একটু গবেষণা করে দেখলেন দ্বারা পর্যন্ত পরিষ্কার সমাধান নিম্নলিখিত লিঙ্ক বর্ণিত হয়: stackoverflow.com/a/4279852

Answer 1

আপনি অক্ষম সম্পত্তি সেট করতে চান

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

আপডেট : আহা, আমি এখন জটিলতা দেখছি। JQuery এর ডায়লগ "বোতাম" বিভাগের মধ্যে একটি একক লাইন যে কাজে আসবে (ছিল।

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

আপনার ডায়ালগটি থেকে বোতাম সংগ্রহ করতে হবে, আপনার কোনটি প্রয়োজন তা খুঁজে বের করার জন্য লুপটি বজায় রাখতে হবে এবং তারপরে আমি উপরে যেমন দেখিয়েছি অক্ষম বৈশিষ্ট্য সেট করব।

Comments

দুর্ভাগ্যক্রমে JQuery ডায়ালগ এটি করা খুব সহজ করে তোলে না, তাই আপনাকে এটিতে কিছুটা কাজ করতে হবে।

— টম রিটার

হ্যাঁ, তবে বোতামগুলির বিকল্পটি ডোম উপাদানগুলি ফেরত দেয় না তবে ফাংশনগুলি - এগুলির মাধ্যমে পুনরাবৃত্তি করা ভাল, তবে একটি অক্ষম করা এত সহজ নয়। আমি কি এখানে কিছু মিস করছি?

— রেমি ডেসপ্রেস-স্মিথ

বোতামগুলি অক্ষম করতে আপনাকে এই পদ্ধতিটি ঘিরে কাজ করতে হবে। ফলস্বরূপ ডোম উপাদানগুলি পৃষ্ঠা থেকে সরাতে jQuery-foo ব্যবহার করুন।

— স্টিফান কেন্ডাল

রাজি - তবে কেন এটি নির্বাচিত উত্তর? অসম্পূর্ণ জন্য -1।

— রেমি ডেস্প্রেস-স্মিথ

আমি বিশ্বাস করি .prop('disabled', true)jQuery 1.6+

— মোলম্বি

Answer 2

এটা খুবই সাধারণ:

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

Comments

আমি এই সমাধানটি পছন্দ করি তবে এটি অবশ্যই পড়তে হবে: $ (": বোতাম: ('প্রমাণীকরণ'))")। অ্যাটর ("অক্ষম", "অক্ষম")। (অ্যাডক্লাস অনুপস্থিত)

— এরিক

যদি কয়েকটি ডায়ালগ থাকে তবে আপনাকে কী সংলাপটি পরিবর্তন করতে হবে তা নির্ধারণ করতে হবে: $ ("# ডায়ালগআইডি")। (পিতা-মাতার) $ (": বোতাম: ('প্রমাণীকরণ'))")। অক্ষম ")" অ্যাডক্লাস ('ইউআই-রাষ্ট্র-অক্ষম');

— পডইগ

+1: এটি এখন পর্যন্ত সেরা উত্তর ... স্বীকৃত উত্তরটি কোনও উত্তর দেয় না, কেবল একটি অত্যাবশ্যক পদ্ধতির পরামর্শ দেয় - যা জটিল w

— আরএসেন্না

আমি এই কাজটিও দেখতে পেলাম যেহেতু jQueryUI ডায়ালগের মধ্যে বোতামগুলি jQueryUI বোতামগুলি: dialog ("# ডায়ালগআইডি") parent ;

— রেকর্ড_নে

আমি বিশ্বাস করি .prop('disabled', true)jQuery 1.6+

— মোলম্বি

Answer 3

আপনি একটি সাধারণ কাজকে জটিল করে তোলেন; jQueryUI কথোপকথনের একটি কারণে বাটন সেট করার দুটি উপায় রয়েছে।

আপনার যদি কেবল প্রতিটি বোতামের জন্য ক্লিক হ্যান্ডলারটি সেট করতে হয় তবে একটি Objectযুক্তি নিয়ে যাওয়া বিকল্পটি ব্যবহার করুন । বোতাম অক্ষম করার জন্য এবং অন্যান্য বৈশিষ্ট্য সরবরাহ করার জন্য, বিকল্পটি ব্যবহার করে যা একটি নেয়Array যুক্তি ।

নিম্নলিখিত উদাহরণটি একটি বোতাম অক্ষম করবে এবং jQueryUI CSS এর সমস্ত ক্লাস এবং বৈশিষ্ট্য প্রয়োগ করে সঠিকভাবে তার রাজ্য আপডেট করবে।

পদক্ষেপ 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);

Comments

সঠিক ধারণা, তবে eachলুপটি অপ্রয়োজনীয়। অ্যারেতে একটি classবৈশিষ্ট্য নির্দিষ্ট করুন buttonsএবং আপনি সঠিক উপাদানটি খুঁজতে এটি ব্যবহার করতে পারেন।

— সিডিএমকেই

সিডম্যাকায় যেমন বলেছে, আপনাকে লুপিংয়ের দরকার নেই। উপরে আপনার উদাহরণে আপনি কেবল এগিয়ে যেতে এবং একটি jQuery নির্বাচক ব্যবহার করতে পারেন: var $ doneButton = $ ("# সম্পন্ন");

— রব

আমি যখন উপরের পদ্ধতিটি (অ্যারে উপায়) ব্যবহার করে বোতামগুলি তৈরি করার চেষ্টা করি তখন বোতামগুলি '1' এবং '0' হিসাবে প্রদর্শিত হবে, 'সম্পন্ন' এবং 'বাতিল' হিসাবে নয়। এটি কেন ঘটছে? বোতামে পাঠ্যটি প্রদর্শিত হচ্ছে না এবং ক্লিক ফাংশনটিও বরখাস্ত করা হচ্ছে না।

— হার্কে

এটি আমার পক্ষে কাজ করে এবং আপনার লুপের দরকার নেই। আইডি সেট করুন তারপরে উপাদানটি অ্যাক্সেস করুন: this.myDialog.dialog ("বিকল্প", "বোতাম", ["id:" addAdapterFormOkButton ", পাঠ্য:" ওকে ", ক্লিক করুন: ফাংশন () {}}]) তারপরে আপনার কেবল দরকার নির্বাচকদের সাথে এটির উপরে প্রবেশ করার জন্য তারা সবাই উপরে বলেছে: var OkButt = $ ("# #AdapterFormOkButton"); okButt.addClass ( 'নামঃ ui-রাষ্ট্রীয় অক্ষম'); OkButt.attr ('অক্ষম', সত্য);

— গার্নার্ড

Answer 4

আপনি যদি বোতামগুলির জন্য আইডি সরবরাহ করে একটি ডায়ালগ তৈরি করেন,

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

Comments

আমি আপনাকে +1 দিয়েছি তবে বোতামের সম্পত্তির পরিবর্তে পদ্ধতিটি ব্যবহার করা ভাল বলে মনে করি যেমন: $ ("# কথোপকথন সংরক্ষণ করুন")। বোতাম ("অক্ষম করুন");

— ফরিদ অ্যালামনোউটি

হা! এতদূর সহজ! ফারিড যেমন বলে তেমন পদ্ধতিটি ব্যবহার করুন।

— পাপিলনউক

Answer 5

আমি নামটি দিয়ে বোতামটি সন্ধান করতে সক্ষম হতে চাই (যেহেতু আমার 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' );
}

Comments

সুন্দর সমাধান। আমি সমাধানটিতে উল্লেখ করেছিলাম, বাটন ফলকটি ডায়ালগের শিশু নয় - কীটি একটি অনন্য ডায়ালগস্লাছ সেট করছে এবং এটি নির্বাচকটির জন্য ব্যবহার করছে। আমি যখন এটি খুঁজছিলাম তখন এটি আমাকে পেয়েছিল।

— রেমি ডেস্প্রেস-স্মিথ

আকর্ষণীয় যে বোতামের পাঠ্যটি বোতামগুলির বস্তুর কী দ্বারা সেট করা হয়েছে। যখন আপনাকে অ্যাট্রিবিউট সেট করার দরকার নেই তখন সীমাবদ্ধ মনে হয়। অন্যথায় অ্যারে সংস্করণটি আরও ভাল, যেখানে প্রতি বোতামে টেক্সট স্পষ্টভাবে সেট করা আছে।

— জেরার্ড ওনিল

Answer 6

এটি একটি বোতাম অক্ষম করে:

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

কোনও পৃষ্ঠায় বেশ কয়েকটি ডায়ালগ থাকলে আপনাকে ডায়ালগ আইডি যুক্ত করতে হবে।

Answer 7

একবার ক্লিক করা বোতামটি অক্ষম করতে প্রশ্ন থেকে নমুনাটি এখানে দেওয়া হয়েছে:

$(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 ডায়ালগের একটি বোতাম অক্ষম করতে পারি?

Answer 8

আমি একটি ডায়ালগ বোতামে অক্ষম (বা অন্য কোনও ক্রিয়া সম্পাদন) করার সহজ উপায় খুঁজে পেয়েছি।

    var dialog_selector = "#myDialogId";

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

আপনি কেবল আপনার কথোপকথনের পিতামাতাকে নির্বাচন করুন এবং সমস্ত বোতাম সন্ধান করুন। তারপরে আপনার বোতামের পাঠ্যটি পরীক্ষা করে আপনি নিজের বোতামগুলি সনাক্ত করতে পারেন।

Answer 9

আমি এই পদ্ধতিটি দিয়ে কাজ করেছি .dialog("widget")যা ডায়ালগটি নিজেই ডিআইভি ফিরিয়ে দেয়। আপনি যদি সংলাপ পদ্ধতিতে থাকেন:

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

Answer 10

ব্যবহারের দৃষ্টিকোণ থেকে, সাধারণত বোতামটি সক্ষম করে রাখা ভাল তবে কেউ যদি অসম্পূর্ণ ফর্মটি জমা দেওয়ার চেষ্টা করে তবে একটি ত্রুটি বার্তা দেখান। আমি ক্লিক করতে চাইলে বোতামটি নিষ্ক্রিয় করা হয় এবং এটির কারণ খুঁজে পাওয়া যায় না, এটি আমার বাদাম চালায়।

Answer 11

এটা চেষ্টা কর:

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

Answer 12

এখানে jQuery ডায়ালগের জন্য আমার সক্ষমOk ফাংশন:

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

"প্রথম" বোতামটি ডানদিকের একদম এগিয়ে। আপনি দুজনেই বোতামটি অক্ষম করেছেন এবং ডায়ালগটির অক্ষম শ্রেণিকে সেট করেছেন, সঠিক চাক্ষুষ প্রভাবের জন্য।

Comments

দ্রষ্টব্য, এটি ধরে নিয়েছে আপনি পৃষ্ঠায় কেবল একটি ডায়ালগ পেয়েছেন। আমি এর সাথে ডিল করার জন্য পৃষ্ঠার যে কোনও ডায়ালগ থেকে নাম দিয়ে কোনও বোতাম আনার জন্য একটি ফাংশন লিখেছি।

— রেমি ডেসপ্রেস-স্মিথ

Answer 13

উত্তরাধিকারে jQuery UI (সংস্করণ 1.7.3) আমি সহজভাবে ব্যবহার করতে সক্ষম হয়েছি

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

কেবলমাত্র ডিওএম উপাদানটিতে বোতামটি অক্ষম করতে। এখন যেহেতু আমরা নতুন jQuery UI (সংস্করণ 1.8.7) এ আপগ্রেড করেছি যে ফায়ারফক্সে আর এই পদ্ধতিটি কাজ করে না, তবে আমি কেবল jquery UI বোতামটি নির্দিষ্ট করে অক্ষম করতে পারি এবং বোতাম jquery অবজেক্টগুলিতে ফাংশন সক্ষম করতে পারি:

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

Answer 14

হাহা, বোতলগুলি অ্যাক্সেস করার জন্য একটি আকর্ষণীয় পদ্ধতি সন্ধান পেয়েছে

$("#dialog").dialog({

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

      }
 });

মনে হচ্ছে আপনারা সবাই জানেন না যে যুক্তিগুলিতে কোনও ইভেন্ট অবজেক্ট আছে ...

উপায় দ্বারা, এটি কলব্যাকের মধ্যে থেকে কেবল বোতামটি অ্যাক্সেস করে, সাধারণ ক্ষেত্রে, অ্যাক্সেসের জন্য একটি আইডি যুক্ত করা ভাল

Comments

আমি মনে করি না এটি কাজ করবে। এটি কেবল তখনই বোতামটি নিষ্ক্রিয় করবে যখন ওকে বোতামটি দ্বি ক্লিক করা হবে।

— জিন-ফ্রান্সোইস বিউচ্যাম্প

প্রসেসিং শেষ না হওয়া পর্যন্ত আমার ডায়ালগের একটি ওকে বাটনটি নিষ্ক্রিয় করা দরকার। এটি পুরোপুরি কাজ করে।

— কোডিংইয়োশি

Answer 15

আপনি যদি সত্যিই কোনও বোতামটি অক্ষম করতে চান তবে আমি দেখতে পেয়েছি যে এটিতে আপনাকে .unbind () পদ্ধতিটি কল করতে হবে। অন্যথায় বোতামটি এখনও সক্রিয় থাকতে পারে এবং ডাবল-ক্লিকের ফলে একাধিক ফর্ম জমা দিতে পারে। নিম্নলিখিত কোডটি আমার পক্ষে কাজ করে:

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

Answer 16

আমি এমন একটি কাজের সন্ধান পেয়েছি যা অনুরূপ কিছু করার চেষ্টা করছে এমন লোকদের জন্য প্রযোজ্য। বোতামটি অক্ষম করার পরিবর্তে আমি 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");
            }
        }
    }
});

যাইহোক, আমি আশা করি যে কাউকে সাহায্য করবে।

Answer 17

এই কাজটি কিছুটা সহজ করার জন্য আমি একটি 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');

আশা করি এটা কাজে লাগবে.

Answer 18

দুর্ভাগ্যক্রমে এখানে থেকে প্রদত্ত কোনও সমাধান পৃষ্ঠাতে বেশ কয়েকটি সংলাপের জন্য কাজ করে না।

এছাড়াও সমস্যাটি ছিল মূল আসল কথোপকথনে নিজের বোতাম বোতাম থাকে না, তবে এটি একটি ভাইবোন।

সুতরাং আমি ডায়লগ আইডি বাছাই করে এলাম:

        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 () ফাংশনটি পরে বোতামটি সক্ষম করতে ব্যবহার করা যেতে পারে, যেমন সফল বৈধতার পরে।

আশা করি এটি কাউকে সাহায্য করতে পারে।

Answer 19

এখানে একটি উদাহরণ রয়েছে যা আমি কেবলমাত্র বোতামগুলি অর্পণ করার অ্যারে পদ্ধতিটি ব্যবহার করে প্রয়োগ করেছি, যা পরে আমাকে আইডি নির্বাচকগুলি ব্যবহার করতে দেয় - যেমন স্বীকৃত উত্তরটি মূলত বর্ণিত হয়েছে - বোতামগুলি সক্ষম / অক্ষম করতে এবং এমনকি পুরোপুরি আমি লুকিয়ে থাকতে / লুকিয়ে রাখতে করছেন।

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

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

Answer 20

আমি নিকের মতো করে একটি ফাংশন তৈরি করেছি, তবে আমার পদ্ধতির জন্য ডায়লগক্লাসটি সেট করার প্রয়োজন হবে না এবং আপনি আইডিটির মাধ্যমে নির্দিষ্ট ডায়ালগের বোতামগুলি পেতে সক্ষম হবেন (যদি আপনার অ্যাপ্লিকেশনে একাধিক উপস্থিত থাকে)

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

Answer 21

কেবল রেকর্ডের জন্য, এই পোস্টটি আমার সমস্যা সমাধানে সহায়তা করেছে। সংক্ষেপে কথায়, আপনার অক্ষম বৈশিষ্ট্য অক্ষম করতে হবে, মিথ্যা নয়:

_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);

Answer 22

আমি মনে করি এটি সবার সাথে কাজ করা উচিত,

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

Answer 23

আমার ডায়ালগ বাক্সে সংরক্ষণ বোতামটি অক্ষম করতে আপনার ফাংশনে নিম্নলিখিত লাইনটি ব্যবহার করুন।

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

একটি বোতামে একটি পাঠ্য পরিবর্তন করতে নিম্নলিখিত লাইনটি ব্যবহার করুন (এটি আমাকে বন্ধ করুন বোতামের পাঠ্য পরিবর্তন করে)

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

Answer 24

@ ক্রিস আপনি চেক বাক্স চেক / চেক না করা অবধি ডায়ালগ বোতাম সক্ষম / অক্ষম করতে নিম্নলিখিত কোডের লাইনগুলি ব্যবহার করতে পারেন

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

Answer 25

কলিং .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);

Answer 26

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

$find("<%= btnPrint.ClientID %>").set_enabled(true);

Answer 27

JQuery বিশ্বে আপনি যদি DOM উপাদানগুলির একটি সেট থেকে কোনও বিষয় নির্বাচন করতে চান তবে আপনার eq () ব্যবহার করা উচিত ।

উদাহরণ:

var বাটন = $ ('বোতাম')। eq (1);

অথবা

var বাটন = $ ('বোতাম: eq (1)');

Answer 28

ডকুমেন্টেশন অনুযায়ী :

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

Answer 29

যদি কেউ ক্লিক করা হয় এমন লোডিং অ্যানিমেশনের মতো কোনও কিছু দিয়ে বোতামটি প্রতিস্থাপনের দিকে তাকিয়ে থাকে (উদাহরণস্বরূপ যখন "সাবমিট করুন" বোতামটি ডায়ালগটিতে ফর্মটি জমা দেয়) - আপনি নিজের চিত্রটির সাথে এই বোতামটি প্রতিস্থাপন করতে পারেন:

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

jQuery প্রতিস্থাপনের সাথে ডক্স

Answer 30

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

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