blocks|key|1151300|text|按钮由类ui-button标识。要禁用按钮，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1151301|$("#myButton").addClass("ui-state-disabled").attr("disabled",+true);|code-block|syntax|javascript|1151302|除非您正在动态创建对话框(这是可能的)，否则您将知道按钮的位置。因此，要禁用第一个按钮：|1151303|$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled",+true);|1151304|ui-state-disabled类提供了一个漂亮的暗淡样式的按钮。|1151305|entityMap^0|4|9|0|0|0|0|0|H|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p>A button is identified by the class <code>ui-button</code>. To disable a button:</p>

<pre><code>$("#myButton").addClass("ui-state-disabled").attr("disabled", true);
</code></pre>

<p>Unless you are dynamically creating the dialog (which is possible), you will know the position of the button. So, to disable the first button:</p>

<pre><code>$("#myButton:eq(0)").addClass("ui-state-disabled").attr("disabled", true);
</code></pre>

<p>The <code>ui-state-disabled</code> class is what gives a button that nice dimmed style.</p>


blocks|key|937026|text|您可以执行此操作来禁用第一个按钮，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|937027|$('.ui-dialog-buttonpane+button:first').attr('disabled',+'disabled');|code-block|syntax|javascript|937028|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could do this to disable the first button for example:</p>

<pre><code>$('.ui-dialog-buttonpane button:first').attr('disabled', 'disabled');
</code></pre>


blocks|key|937101|text|我创建了一个jQuery函数，以使这项任务更容易一些。也许现在有了一个更好的解决方案。不管怎样，这是我的2cents。:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|937102|只需将此代码添加到您的JS文件中：|937103|$.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;}
});};|code-block|syntax|javascript|937104|禁用带有类‘dialog’的对话框上的按钮'Ok‘：|937105|$('.dialog').dialogButtons('Ok',+'disabled');|937106|启用所有按钮：|937107|$('.dialog').dialogButtons('enabled');|937108|启用“关闭”按钮并更改颜色：|937109|$('.dialog').dialogButtons('Close',+'enabled').css('color','red');|937110|所有按钮上的文字均为红色：|937111|$('.dialog').dialogButtons().css('color','red');|937112|希望这能有所帮助:)|937113|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1B|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|6|7|1D|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|11|$]]

<p>I created a jQuery function in order to make this task a bit easier. Probably now there is a better solution... either way, here's my 2cents. :)</p>

<p>Just add this to your JS file:</p>

<pre><code>$.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 &amp;&amp; state=='disabled') {$(this).attr('disabled',true).addClass('ui-state-disabled');return this;}
    if(text==name &amp;&amp; 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;}
});};
</code></pre>

<p>Disable button 'Ok' on dialog with class 'dialog':</p>

<pre><code>$('.dialog').dialogButtons('Ok', 'disabled');
</code></pre>

<p>Enable all buttons:</p>

<pre><code>$('.dialog').dialogButtons('enabled');
</code></pre>

<p>Enable 'Close' button and change color:</p>

<pre><code>$('.dialog').dialogButtons('Close', 'enabled').css('color','red');
</code></pre>

<p>Text on all buttons red:</p>

<pre><code>$('.dialog').dialogButtons().css('color','red');
</code></pre>

<p>Hope this helps :)</p>


blocks|key|937161|text|看起来任何人，甚至在this+linked+question，都提出了这个解决方案，类似于Nick+Craver给出的答案的第一部分：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|937162|$("#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");
++++++++++++}
++++++++}
++++]
});|code-block|syntax|javascript|937163|然后，在其他地方，您应该能够使用jquery+UI按钮的API：|937164|$("#button-ok").button("disable");|937165|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/577548/how-can-i-disable-a-button-in-a-jquery-dialog-from-a-function|1|http://docs.jquery.com/UI/Button^0|A|K|0|0|0|S|3|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>Looks like anyone, even in <a href="https://stackoverflow.com/questions/577548/how-can-i-disable-a-button-in-a-jquery-dialog-from-a-function">this linked question</a>, have proposed this solution, similar to the first part of the answer given by Nick Craver:</p>

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

<p>Then, elsewhere, you should be able to use the <a href="http://docs.jquery.com/UI/Button" rel="noreferrer">API</a> for the jquery UI button:</p>

<pre><code>$("#button-ok").button("disable");
</code></pre>


blocks|key|937212|text|以下是按钮单击功能中的工作方式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|937213|$(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');
++++++++++++}
++++++++}
++++});
}|code-block|syntax|javascript|937214|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The following works from within the buttons click function:</p>

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


blocks|key|1151541|text|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%2B%2B)
++++{
++++++++var+jButton+=+$(+buttons[i]+);
++++++++for+(var+j+=+0;+j+<+button_names.length;+j%2B%2B)
++++++++++++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:+'%2Bbutton_names);
++++else
++++{
++++++++if+(enable)
++++++++++++button.removeAttr('disabled').removeClass(+'ui-state-disabled'+);
++++++++else
++++++++++++button.attr('disabled',+'disabled').addClass(+'ui-state-disabled'+);
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1151542|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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 &lt; buttons.length; i++)
    {
        var jButton = $( buttons[i] );
        for (var j = 0; j &lt; 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' );
    }
}
</code></pre>


blocks|key|1151556|text|您可以覆盖按钮数组，只保留需要的按钮。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1151557|$(+".selector"+).dialog(+"option",+"buttons",+[{
++++text:+"Close",
++++click:+function()+{+$(this).dialog("close");+}
}]+);|code-block|syntax|javascript|1151558|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can overwrite the buttons array and left only the ones you need.</p>

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


blocks|key|937322|text|我使用的方法是Cancel:+function(e)+{+++++++++++$(e.target).attr(+"disabled","disabled"+);+++++++++}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|937323|这是我找到的最短最简单的方法。|937324|entityMap^0|7|2C|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

<p>The way I do it is
 <code>Cancel: function(e) {
          $(e.target).attr( "disabled","disabled" );
        }</code></p>

<p>This is the shortest and easiest way I found.</p>


blocks|key|1151701|text|您可以在构造对话框时禁用按钮：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1151702|​|1151703|$(function()+{
++$("#dialog").dialog({
++++modal:+true,
++++buttons:+[
++++++{+text:+"Confirm",+click:+function()+{+$(this).dialog("close");+},+disabled:+true+},
++++++{+text:+"Cancel",+click:+function()+{+$(this).dialog("close");+}+}
++++]
++});
});|code-block|syntax|javascript|1151704|@import+url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");|1151705|<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>|1151706|1151707|也可以在创建对话框后随时禁用它：|1151708|1151709|$(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);
});|1151710|@import+url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");|1151711|<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>|1151712|1151713|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|W|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Y|$]]

<p>You can disable a button when you construct the dialog:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  $("#dialog").dialog({
    modal: true,
    buttons: [
      { text: "Confirm", click: function() { $(this).dialog("close"); }, disabled: true },
      { text: "Cancel", click: function() { $(this).dialog("close"); } }
    ]
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;

&lt;div id="dialog" title="Confirmation"&gt;
  &lt;p&gt;Proceed?&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Or you can disable it anytime after the dialog is created:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;

&lt;div id="dialog" title="Confirmation"&gt;
  &lt;p&gt;Button will disable after two seconds.&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1151734|text|这对我很有效--|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1151735|$("#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"+);
++++++++++++++++++++++++++++++++++++}
++++++++++++++++++++++++++++++++}
++++++++++++++++++++++++});
++++++++++++++++++++}
++++++++++++++++});
++++++++}
++++}
});+|code-block|syntax|javascript|1151736|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This worked for me --</p>

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


<p>How do I go about disabling a button <a href="http://jqueryui.com/demos/dialog/#modal-confirmation" rel="noreferrer">on the jQuery UI dialog</a>. I can't seem to find this in any of the documentation in the link above.</p>

<p>I have 2 buttons on the modal confirmation ("Confirm" and "Cancel"). In certain cases, I want to disable the "Confirm" button.</p>


How can I disable a button on a jQuery UI dialog?

jQuery

JSON

如何禁用按钮。我似乎在上面链接的任何文档中都找不到这一点。我有两个模式确认按钮(“确认”和“取消”)。在某些情况下，我想禁用“确认”按钮。

问如何禁用jQuery UI对话框上的按钮？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何禁用jQuery UI对话框上的按钮？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何禁用jQuery UI对话框上的按钮？
EN