CODEWITHSUNDEEP
jqueryjquery-mobile
Juan Pablo Gomez
Juan Pablo Gomez

Reputation: 5554

jquery disable button only works IE

I have a jquery mobile app, this jquery button group is generated with 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>

Then i have a jquery func that enable or disable some buttons:

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

This function works great but the problem is that it only works on IE. Crhrome and firefox never disable de jquery button.

Upvotes: 0

Views: 677

Answers (4)

Juan Pablo Gomez
Juan Pablo Gomez

Reputation: 5554

The aproach of wirey, solve part of the problem but it throw a message, indicating that the button disable option must be initialized.

Modifing wirey code works for me.

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

Upvotes: 0

Kiro Coneski
Kiro Coneski

Reputation: 515

Instead of adjusting the property, which doesn't exist for <a>, you should add the ui-disabled class to the item. So instead of:

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

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

or if you want more control:

$('#ItemEliminar').addClass('ui-disabled'); to disable it

and

$('#ItemEliminar').removeClass('ui-disabled'); to enable it.

Sugessted edit from @s.Daniel:

Also you should consider replacing <error>with <div class="error"> or <div id="error"> to do things in a standard way avoiding problems.

Thank you for the suggestion, but as I understand data is some kind of array with data into it, and not an DOM element that contains the data

Upvotes: 3

wirey00
wirey00

Reputation: 33661

Since you are using jQuery UI buttons, use the api's methods http://api.jqueryui.com/button/

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

Upvotes: 1

Jason
Jason

Reputation: 349

you'll probably have to use css:

I got this here a while back:

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

Upvotes: 0

Related Questions