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

ฉันมีกล่องโต้ตอบ 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');
      }
    }
  })
});

คุณต้องการตั้งค่าคุณสมบัติที่ปิดใช้งาน

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

อัปเดต : Ahha ฉันเห็นความซับซ้อนแล้ว jQuery โต้ตอบมีสายเดียวที่จะใช้ (ภายใต้ "ปุ่ม" ส่วน

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

คุณจะต้องได้รับชุดปุ่มจากกล่องโต้ตอบวนรอบเพื่อหาปุ่มที่คุณต้องการจากนั้นตั้งค่าคุณลักษณะที่ปิดใช้งานตามที่ฉันแสดงไว้ด้านบน

มันง่ายมาก:

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

คุณกำลังยุ่งอยู่กับงานง่ายๆ กล่องโต้ตอบ 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);

หากคุณสร้างกล่องโต้ตอบโดยระบุรหัสสำหรับปุ่ม

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

ฉันต้องการหาปุ่มตามชื่อ (เนื่องจากฉันมีหลายปุ่มในกล่องโต้ตอบ 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' );
}

สิ่งนี้ปิดใช้งานปุ่ม:

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

คุณต้องเพิ่ม ID การโต้ตอบหากคุณมีหลายบทสนทนาในหน้า

นี่คือตัวอย่างจากคำถามที่แก้ไขเพื่อปิดใช้งานปุ่มเมื่อคลิก:

$(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 ได้อย่างไร

ฉันพบวิธีที่ง่ายในการปิดการใช้งาน (หรือดำเนินการอื่น ๆ ) บนปุ่มโต้ตอบ

    var dialog_selector = "#myDialogId";

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

คุณเพียงแค่เลือกพาเรนต์ของกล่องโต้ตอบและค้นหาปุ่มทั้งหมด จากนั้นตรวจสอบข้อความของปุ่มของคุณคุณสามารถระบุปุ่มของคุณ

ฉันได้รับการทำงานด้วยวิธีการ.dialog("widget")ที่ส่งกลับโต้ตอบ DIV นี้ หากคุณอยู่ในวิธีการโต้ตอบ:

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

จากมุมมองการใช้งานโดยปกติแล้วจะเป็นการดีกว่าที่จะปล่อยปุ่มไว้ แต่แสดงข้อความข้อผิดพลาดหากมีคนพยายามส่งแบบฟอร์มที่ไม่สมบูรณ์ มันทำให้ฉันบ้าเมื่อปุ่มที่ฉันต้องการคลิกถูกปิดใช้งานและไม่มีเงื่อนงำว่าทำไม

ลองสิ่งนี้:

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

นี่คือฟังก์ชั่น enableOk ของฉันสำหรับกล่องโต้ตอบ jQuery:

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

ปุ่ม "แรก" เป็นปุ่มที่อยู่ทางด้านขวาสุด คุณทั้งสองปิดการใช้งานปุ่มและตั้งค่าคลาสปิดการใช้งานของไดอะล็อกสำหรับเอฟเฟ็กต์ภาพที่เหมาะสม

ใน jQuery UI ดั้งเดิม (เวอร์ชั่น 1.7.3) ฉันสามารถใช้งานได้อย่างง่ายดาย

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

เพื่อปิดการใช้งานปุ่มบนองค์ประกอบ DOM เท่านั้น ตอนนี้เราได้อัปเกรดเป็น jQuery UI ที่ใหม่กว่า (เวอร์ชั่น 1.8.7) วิธีการนั้นไม่สามารถใช้งานได้ใน Firefox อีกต่อไป แต่ฉันสามารถเรียกใช้งานปุ่มเฉพาะ jquery UI และปิดใช้งานฟังก์ชั่นบนวัตถุ jquery ปุ่ม:

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

ฮ่าฮ่าเพิ่งพบวิธีที่น่าสนใจในการเข้าถึงกระดุม

$("#dialog").dialog({

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

      }
 });

ดูเหมือนว่าคุณทุกคนไม่รู้ว่ามีวัตถุเหตุการณ์ในข้อโต้แย้ง ...

โดยวิธีการก็แค่เข้าถึงปุ่มจากภายในโทรกลับในกรณีทั่วไปมันเป็นการดีที่จะเพิ่มรหัสสำหรับการเข้าถึง

หากคุณต้องการปิดการใช้งานปุ่มจริง ๆ ฉันพบว่าคุณต้องเรียกใช้เมธอด. unbind () ด้วย มิฉะนั้นปุ่มนั้นอาจยังทำงานอยู่และการดับเบิลคลิกอาจนำไปสู่การส่งแบบฟอร์มหลายรายการ รหัสต่อไปนี้ใช้งานได้สำหรับฉัน:

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

ฉันพบวิธีแก้ปัญหาที่อาจนำไปใช้กับคนที่พยายามทำสิ่งที่คล้ายกัน แทนที่จะปิดการใช้งานปุ่มฉันใส่ง่าย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");
            }
        }
    }
});

อย่างไรก็ตามฉันหวังว่าจะช่วยให้ใครบางคน

ฉันสร้างฟังก์ชัน jQuery เพื่อให้งานนี้ง่ายขึ้นเล็กน้อย เพียงเพิ่มลงในไฟล์ JavaScript ของคุณ:

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

ฉันหวังว่านี่จะช่วยได้.

น่าเสียดายที่การแก้ปัญหาจากที่นี่ไม่สามารถใช้งานได้กับกล่องโต้ตอบหลายหน้า

ปัญหาก็คือกล่องโต้ตอบต้นฉบับไม่ได้มีบานหน้าต่างปุ่มในตัวเอง แต่เป็นพี่น้องของมัน

ดังนั้นฉันจึงเลือกการโต้ตอบด้วยรหัสประจำตัวเช่น:

        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 () เดียวกันสามารถใช้ในภายหลังเพื่อเปิดใช้งานปุ่มเช่นหลังจากการตรวจสอบเสร็จสมบูรณ์

หวังว่าจะสามารถช่วยใครบางคน

นี่คือตัวอย่างที่ฉันเพิ่งใช้งานโดยใช้วิธี Array ในการกำหนดปุ่มซึ่งทำให้ฉันสามารถใช้ตัวเลือกรหัสในภายหลัง - เช่นเดียวกับคำตอบที่ได้รับการยอมรับที่ระบุไว้เดิม - เพื่อเปิด / ปิดการใช้งานปุ่มและแสดง / ซ่อนปุ่มทั้งหมด การทำ

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

หลังจากส่งสำเร็จฉันปิดการใช้งานและซ่อนสองปุ่มและเปิดใช้งานปุ่ม OK ที่ถูกปิดใช้งานโดยค่าเริ่มต้น

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

หวังว่านี่จะช่วยได้

ฉันสร้างฟังก์ชั่นที่คล้ายกับสิ่งที่ Nick ทำ แต่วิธีการของฉันไม่ต้องการการตั้งค่า dialogClass และคุณจะสามารถรับปุ่มของกล่องโต้ตอบเฉพาะผ่าน id (ถ้ามีมากกว่าหนึ่งในแอปพลิเคชันของคุณ)

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

สำหรับบันทึกโพสต์นี้ช่วยให้ฉันแก้ปัญหาของฉันได้ กล่าวโดยย่อคุณต้องตั้งค่าแอททริบิวต์ที่ปิดใช้งานเป็นปิดใช้งานไม่ใช่เท็จ:

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

ฉันคิดว่ามันควรจะทำงานกับทุกคน

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

หากต้องการปิดใช้งานปุ่มบันทึกในกล่องโต้ตอบของฉันให้ใช้บรรทัดต่อไปนี้ในฟังก์ชั่นของคุณ

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

หากต้องการเปลี่ยนข้อความในปุ่มให้ใช้บรรทัดต่อไปนี้ (นี่เป็นการเปลี่ยนข้อความของปุ่มยกเลิกเป็นปิดฉัน)

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

@Chris คุณสามารถใช้บรรทัดของรหัสต่อไปนี้เพื่อเปิดใช้งาน / ปิดการใช้งานปุ่มโต้ตอบจนกว่ากล่องกาเครื่องหมายของคุณตรวจสอบ / ไม่ถูกตรวจสอบ

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

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

นี่เป็นงานสำหรับฉัน:

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

ในโลก jQuery หากคุณต้องการเลือกวัตถุจากชุดขององค์ประกอบ DOM คุณควรใช้eq ()()

ตัวอย่าง:

ปุ่ม var = $ ('ปุ่ม') eq (1);

หรือ

ปุ่ม var = $ ('ปุ่ม: eq (1)');

ตามเอกสารประกอบ :

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

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

เพื่อให้สามารถเลือกปุ่มได้ง่ายคุณสามารถเพิ่มคลาส CSS ของตัวเองลงในปุ่มซึ่งควรเปิดใช้งาน / ปิดใช้งาน

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

หากใครที่กำลังมองหาที่จะแทนที่ปุ่มด้วยสิ่งที่ชอบภาพเคลื่อนไหวโหลดเมื่อคลิก (ตัวอย่างเช่นเมื่อปุ่ม "ส่ง" ส่งแบบฟอร์มในกล่องโต้ตอบ) - คุณสามารถแทนที่ปุ่มด้วยภาพของคุณเช่นนี้:

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

jQuery แทนที่ด้วยเอกสาร

หากต้องการปิดใช้งานปุ่มเดียวให้เปิดกล่องโต้ตอบ:

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