Question

我有一个jquery移动应用程序，这个jquery按钮组是用c＃

生成的

<ul class="ui-grid-d">
    <li class="ui-block-a"><a id="MostrarDetallePedido" class="ui-btn ui-btn-up-a" disabled="disabled" href="/Documentos/Docs/DocsDetalle?StrIdDocumento=01500___00000000000000041" data-role="button" data-theme="a" data-ajax="false"><span aria-hidden="true" class="ui-btn-inner"><span class="ui-btn-text">Detalle</span></span></a></li>
    <li class="ui-block-b"><a id="ItemCondiciones" class="ui-state-disabled ui-btn ui-btn-up-b" disabled="disabled" href="/Documentos/Docs/DocsDetalle?StrIdDocumento=01500___00000000000000041" data-role="button" data-theme="b" data-ajax="false"><span aria-hidden="true" class="ui-btn-inner"><span class="ui-btn-text">Condiciones</span></span></a></li>
    <li class="ui-block-c"><a id="ItemEliminar" class="ui-state-disabled ui-btn ui-btn-up-c" disabled="disabled" href="/Documentos/Docs/DocsDetalle?StrIdDocumento=01500___00000000000000041" data-role="button" data-theme="c" data-ajax="false"><span aria-hidden="true" class="ui-btn-inner"><span class="ui-btn-text">Eliminar</span></span></a></li>
    <li class="ui-block-d"><a id="ItemAdiciones" class="ui-state-disabled ui-btn ui-btn-up-d" disabled="disabled" href="/Documentos/Docs/DocsDetalle?StrIdDocumento=01500___00000000000000041" data-role="button" data-theme="d" data-ajax="false"><span aria-hidden="true" class="ui-btn-inner"><span class="ui-btn-text">Adiciones</span></span></a></li>
    <li class="ui-block-e"><a id="ItemComponentes" class="ui-state-disabled ui-btn ui-btn-up-e" disabled="disabled" href="/Documentos/Docs/DocsDetalle?StrIdDocumento=01500___00000000000000041" data-role="button" data-theme="e" data-ajax="false"><span aria-hidden="true" class="ui-btn-inner"><span class="ui-btn-text">Componentes</span></span></a></li> 
</ul>

然后我有一个启用或禁用某些按钮的jquery func：

    function (data) {
        $(data).find('error').each(function () {
            if ($(this).text() == 'NoError') {
                $('#ItemEliminar').prop('disabled', false);
                $('#MostrarDetallePedido').prop('disabled', false);
                $('#ItemComponentes').prop('disabled', false);
                $('#ItemAdiciones').prop('disabled', false);
                $('#ItemCondiciones').prop('disabled', false);

                $(data).find('NombreItem').each(function () {
                    $('#NombreItem').text($(this).text());
                })
                $(data).find('OpcionesItem').each(function () {
                    alert($(this).text());
                })

            } else {
                $(data).find('NombreItem').each(function () {
                    $('#NombreItem').text($(this).text());
                })
                $('#ItemEliminar').prop('disabled', true);
                $('#MostrarDetallePedido').prop('disabled', false);
                $('#ItemComponentes').prop('disabled', true);
                $('#ItemAdiciones').prop('disabled', true);
                $('#ItemCondiciones').prop('disabled', true);
            }
        })
    }

这个功能效果很好，但问题是它只适用于IE。 Crhrome和firefox从不禁用de jquery按钮。

Answer 1

您应该将ui-disabled类添加到项目中，而不是调整＆lt; a＆gt;不存在的属性。所以而不是：

$('#ItemEliminar').prop('disabled', true);

使用$('#ItemEliminar').toggleClass('ui-disabled');

或者如果你想要更多控制：

$('#ItemEliminar').addClass('ui-disabled');禁用它

和

$('#ItemEliminar').removeClass('ui-disabled');启用它。

来自@ s.Daniel的Sugessted编辑：


另外，您应该考虑将<error>替换为<div class="error">     或<div id="error">以标准方式避免做事     问题。

感谢您的建议，但据我所知，数据是某种带有数据的数组，而不是包含数据的DOM元素

Answer 2

由于您使用的是jQuery UI按钮，请使用api的方法http://api.jqueryui.com/button/

$('#ItemEliminar')
     .button('disable') // disable the button
     .button('refresh'); // refresh it's state

Answer 3

你可能不得不使用css：

我在这里待了一会儿：

a[disabled="disabled"] { 
set your opacity, etc here
}

Answer 4

wirey 的方法，解决了部分问题，但它会抛出一条消息，表明必须初始化按钮禁用选项。

修改有线代码对我有用。

$('#ItemEliminar')
   .button({ disabled: false }) //Here initializes disable option
   .button('disable')           // Disable the button
   .button('refresh');          // Refresh

jquery禁用按钮仅适用于IE

4 个答案: