ฉันจะปิดการใช้งานปุ่มบนกล่องโต้ตอบ jQuery UI ได้อย่างไร


143

ฉันจะปิดการใช้งานปุ่มได้อย่างไร บนกล่องโต้ตอบ jQuery UIได้อย่างไร ฉันดูเหมือนจะไม่พบสิ่งนี้ในเอกสารใด ๆ ในลิงก์ด้านบน

ฉันมี 2 ปุ่มในการยืนยัน modal ("ยืนยัน" และ "ยกเลิก") ในบางกรณีฉันต้องการปิดการใช้งานปุ่ม "ยืนยัน"


ดูคำตอบในหัวข้อนี้: stackoverflow.com/questions/577548/…
Erik

5
@Erik - สถานการณ์มีการเปลี่ยนแปลงเล็กน้อยตั้งแต่คำตอบเหล่านั้นคือเนื่องจาก.button()ปลั๊กอินดังนั้นพวกเขาจึงไม่จำเป็นต้องเป็นทางออกที่ดีที่สุด / สะอาดที่สุดอีกต่อไป
Nick Craver

คำตอบ:


158

หากคุณมี.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()จากการจับคู่สตริงย่อยของอย่างอื่น


next () จะไม่ทำงานสำหรับฉันเนื่องจากมี div "ที่ปรับขนาดได้" ทั้งหมดระหว่างกล่องโต้ตอบและปุ่มกด ดังนั้นฉันจึงใช้ nextAll () และแยก buttonPan ออกจากปุ่ม:$("#dialogID").nextAll(".ui-dialog-buttonpane").find("button:contains('Confirm')").attr("disabled", true).addClass("ui-state-disabled");
Matthieu

โปรดทราบว่าเนื่องจากบานหน้าต่างปุ่มไม่ได้เป็นลูกของกล่องโต้ตอบคุณอาจมีปัญหาหากหน้าของคุณกำหนดหลายกล่องโต้ตอบ
Brett Ryan

วิธีแก้ปัญหาที่ยอดเยี่ยมด้วย$(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");แม้ว่าถ้าคุณต้องการปิดการใช้งานปุ่มจากฟังก์ชั่นที่คุณมีสำหรับมันคุณจะต้องวิดเจ็ตโต้ตอบนั้นและปิดใช้งานปุ่มหลังจากนั้น แบบนี้$(this).dialog("widget").find(".ui-dialog-buttonpane button:contains('Confirm')").button("disable");
meridius

3
โปรดทราบว่าถ้าคุณไม่ต้องการค้นหาปุ่มที่ต้องการด้วยข้อความคุณสามารถให้คลาสกับปุ่มได้เช่นกัน ไดอะล็อก jQuery UI สนับสนุนอาร์เรย์ที่มีวัตถุสำหรับตัวเลือกปุ่มแต่ละวัตถุมีข้อมูลเกี่ยวกับคุณลักษณะของปุ่ม
Dennis

สิ่งนี้ใช้ได้กับฉัน: $ (นี่) .closest (". ui-dialog"). find ("ปุ่ม: มี ('บันทึก')"). prop ("ปิดการใช้งาน", จริง) .addClass ("ui-state- คนพิการ ");
Adrian P.

217

ดูเหมือนว่าทุกคนแม้ในคำถามที่เชื่อมโยงนี้ได้เสนอวิธีแก้ไขปัญหานี้คล้ายกับส่วนแรกของคำตอบที่ได้รับจาก Nick Craver:

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

จากนั้นที่อื่นคุณควรใช้APIสำหรับปุ่ม jquery UI:

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

15
+1 ฉันไม่แน่ใจว่าทำไมคำตอบนี้ไม่ได้รับคะแนนเพิ่มเติม มันสะอาดที่สุดที่ฉันเคยเจอและใช้งานได้ดี
Doug Wilson

38
สิ่งนี้จะต้องอยู่ในเอกสาร ... มันไม่ได้แสดงว่าคุณสามารถกำหนดรหัสให้กับปุ่มได้
Jay K

1
นี่คือคำตอบที่ดีที่สุดอย่างไม่ต้องสงสัย มีวิธีแก้ไขปัญหาอื่น ๆ ที่ทำโดยค้นหาปุ่มโดยใช้ตัวเลือกที่ผิด เก่งมาก Nicola!
jnoreiga

4
เห็นด้วย: นี่เป็นวิธีแก้ปัญหาที่ฉันคิดว่าทีม UI ควรใช้ ... : +) คุณสามารถทำได้เร็วกว่า:{text:"ok",disabled:true,click: function(){}}
Matthieu

10
มันเยี่ยมมาก! คุณยังสามารถใช้ "class" แทน "id" หากคุณกังวลว่ารหัสนั้นไม่เหมือนใคร แม้ว่าคุณจะต้องพิมพ์อีกเล็กน้อยเพื่อค้นหาปุ่ม:$("#dialog").dialog("widget").find(".button-ok-class").button("enable")
Desm

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

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


ไม่ใช่ว่ามันไม่มีเอกสาร มันคือเมื่อมีการประมวลผลปุ่มคุณสมบัติทั้งหมดจากวัตถุจะถูกดำเนินการกับคุณสมบัติของ jQuery ตัวอย่างเช่นคุณสามารถเพิ่มattr: { 'data-value' : 'some value here' }หากคุณต้องการที่จะเพิ่มคุณลักษณะdata-valueให้กับปุ่ม
บดขยี้

2
ไม่ได้ไม่มีเอกสารอีกต่อไป มันเป็นทางการ
Salman

โซลูชันนี้มีความหรูหรามากกว่ารุ่นที่ได้รับความนิยมมาก สิ่งนี้จะช่วยให้คุณมีความยืดหยุ่นโดยไม่มีปัญหาเกี่ยวกับตัวเลือกที่กำหนดไว้อย่างชัดเจน
KimvdLinde

โปรดทราบว่าdisabledต้องกำหนดแอตทริบิวต์เมื่อสร้างปุ่ม
user1032531

พยายามลงคะแนน แต่ฉันโหวต 4 ชั่วโมงที่แล้วและไม่สามารถทำได้ วิธีนี้ไม่ทำงานอย่างถูกต้องอีกต่อไป
user1032531

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

แต่คุณต้องคลิกก่อนที่จะเป็นสีเทา
Matt

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 เซ็นต์ของฉัน :)

เพียงเพิ่มลงในไฟล์ 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');

หวังว่าจะช่วย :)


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

1

รหัสนี้ปิดใช้งานปุ่มด้วย 'YOUR_BUTTON_LABEL' คุณสามารถแทนที่ชื่อใน contain () เพื่อปิดการใช้งาน

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

แทนที่ 'YOUR_BUTTON_LABEL' ด้วยป้ายกำกับของปุ่มของคุณ การเปิดใช้งาน

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


0

วิธีที่ฉันทำคือ Cancel: function(e) { $(e.target).attr( "disabled","disabled" ); }

นี่เป็นวิธีที่สั้นและง่ายที่สุดที่ฉันพบ


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:

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.