icon - Deshabilitar botones en jQuery Mobile
jquery mobile list divider (12)
Esto es para jQuery Mobile. No todas las respuestas regulares de jQuery funcionarán.
No puedo hacer que mis botones se deshabiliten en jQuery Mobile.
jQuery Mobile dice que use
$(''input'').button(''disable'');
Pero recibo un mensaje de error en Firebug:
excepción no detectada: no puede invocar métodos en el botón antes de la inicialización; intentó llamar al método ''desactivar''.
Está en la sección lista para documentos de mi página, así que no sé cómo aún no se ha inicializado.
Intenté llamar al botón directamente por su id pero eso no funciona.
He intentado:
$(''button'').attr("disabled", "disabled");
No funciona
También tengo un comando de cambio que habilitará un botón según el valor. Tengo esa parte de donde enruta a las declaraciones correctas de "casos", pero la función habilitar / deshabilitar botones en jQuery móvil no funciona.
código: http://pastebin.com/HGSbpAHQ
excepción no detectada: no puede invocar métodos en el botón antes de la inicialización; intentó llamar al método ''desactivar''.
esto significa que está intentando llamarlo a un elemento que no se maneja como un botón, porque no se le llamó a ningún método .button . Por lo tanto, su problema DEBE ser el selector.
Está seleccionando todas las entradas $(''input'') , por lo que intenta llamar al método disable desde el espacio de nombres del widget de botón no solo en los botones, sino también en las entradas de texto.
$(''button'').attr("disabled", "disabled"); no funcionará con jQuery Mobile, ya que modifica el botón que está oculto y reemplazado por un marcado que genera jQuery Mobile.
TIENE QUE usar el método de jQueryMobile para deshabilitar el botón con un selector correcto como:
$(''div#DT1S input[type=button]'').button(''disable'');
ACTUALIZAR:
Dado que esta pregunta todavía recibe muchos éxitos, también estoy agregando los jQM Doc actuales sobre cómo desactivar el botón:
Ejemplos actualizados:
Habilitar habilitar un botón de formulario desactivado
$(''[type="submit"]'').button(''enable'');
deshabilitar deshabilitar un botón de formulario
$(''[type="submit"]'').button(''disable'');
actualizar actualizar el botón de formulario
Si manipulas un botón de formulario a través de JavaScript, debes llamar al método de actualización para actualizar el diseño visual.
$(''[type="submit"]'').button(''refresh'');
Publicación original a continuación:
Ejemplo en vivo: http://jsfiddle.net/XRjh2/2/
ACTUALIZAR:
Usando el ejemplo de @naugtur a continuación: http://jsfiddle.net/XRjh2/16/
ACTUALIZACIÓN # 2:
Ejemplo de botón de enlace:
JS
var clicked = false;
$(''#myButton'').click(function() {
if(clicked === false) {
$(this).addClass(''ui-disabled'');
clicked = true;
alert(''Button is now disabled'');
}
});
$(''#enableButton'').click(function() {
$(''#myButton'').removeClass(''ui-disabled'');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<a href="#" data-role="button" id="myButton">Click button</a>
<a href="#" data-role="button" id="enableButton">Enable button</a>
</div>
</div>
NOTA: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Los enlaces con el mismo estilo que los botones tienen todas las mismas opciones visuales que los botones verdaderos basados en formularios a continuación, pero hay algunas diferencias importantes. Los botones basados en enlaces no son parte del complemento de botones y solo usan el complemento buttonMarkup subyacente para generar los estilos de botones, por lo que los métodos del botón de formulario (habilitar, deshabilitar, actualizar) no son compatibles. Si necesita deshabilitar un botón basado en enlace (o cualquier elemento), es posible aplicar la clase deshabilitada ui-disabled con JavaScript para lograr el mismo efecto.
Basado en mis hallazgos ...
Este error de Javascript ocurre cuando ejecuta el botón () en un elemento con un selector e intenta usar una función / método de botón () con un selector diferente en el mismo elemento.
Por ejemplo, aquí está el HTML:
<input type="submit" name="continue" id="mybuttonid" class="mybuttonclass" value="Continue" />
Entonces ejecutas el botón () en él:
jQuery(document).ready(function() { jQuery(''.mybuttonclass'').button(); });
Luego intentas desactivarlo, esta vez no usando la clase como la iniciaste, sino que usando la ID, entonces obtendrás el error ya que este hilo está titulado:
jQuery(document).ready(function() { jQuery(''#mybuttonid'').button(''option'', ''disabled'', true); });
Entonces, más bien use la clase nuevamente cuando la inició, eso resolverá el problema.
Creé un widget que puede deshabilitar por completo o presentar una vista de solo lectura del contenido en su página. Deshabilita todos los botones, anclajes, elimina todos los eventos de clic, etc. y puede volver a habilitarlos nuevamente. Incluso es compatible con todos los widgets de jQuery UI. Lo creé para una aplicación que escribí en el trabajo. Eres libre de usarlo.
Compruébelo en ( http://www.dougestep.com/dme/jquery-disabler-widget ).
Lo que parece ser necesario es definir realmente el botón como un widget de botón.
Tuve el mismo problema (en la versión beta 1)
yo si
$("#submitButton").button();
en mi controlador de ventana lista, después de eso funcionó para hacer lo que se dice en los documentos, es decir:
$("#submitButton").button(''disable'');
Supongo que esto tiene que ver con que jqm está convirtiendo el marcado, pero en realidad no está instalando un widget de botón real para botones y botones de enlace.
Obtendrá ese error probablemente porque el elemento aún no está dentro del DOM. $ (documento). listo (); no trabajará. Intente agregar su código a un controlador de eventos pageinit.
Aquí hay un ejemplo de trabajo:
<!DOCTYPE html>
<html>
<head>
<title>Button Disable</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div id="MyPageId" data-role="page">
<div data-role="header">
<h1>Button Disable</h1>
</div>
<div data-role="content">
<button id="button1" type="button" onclick="javascript:alert(''#button1 clicked'');">Button 1</button>
<button id="button2" type="button" onclick="javascript:alert(''#button2 clicked'');">Button 2</button>
</div>
<div data-role="footer">
<p>footer</p>
</div>
</div>
<script type="text/javascript">//<![CDATA[
$(''#MyPageId'').bind("pageinit", function (event, data) {
$("#button1").button("disable");
});
//]]></script>
</body>
</html>
Espero que ayude a alguien
Para deshabilitar un botón, agregue clase css disabled . escribir
$("button").addClass(''disabled'')
Para el botón de enlace,
El .button(''enable'') llamada .button(''enable'') solo da efecto, pero funcionalmente no.
Pero tengo un truco. Podríamos usar el atributo de data- HTML5 para guardar / intercambiar el valor de href y onclick .
ver:
modo de código fuente:
Para jQuery Mobile 1.4.5:
para los botones de anclaje, la clase CSS es: ui-state-disabled , y para los botones de entrada es suficiente para alternar el atributo disabled .
function toggleDisableButtons() {
$("#link-1").toggleClass("ui-state-disabled", !$("#link-1").hasClass("ui-state-disabled"));
$("#button-1").attr("disabled") ? $("#button-1").removeAttr("disabled") : $("#button-1").attr("disabled","");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page-1">
<div role="main" class="ui-content">
<button class="ui-btn" onclick="toggleDisableButtons();">Toggle disabled</button>
<a id="link-1" href="#" class="ui-btn ui-state-disabled">Anchor</a>
<button id="button-1" disabled="">Button</button>
</div>
</div>
</body>
</html>
Por cierto, para los botones de entrada, hay un método alternativo:
Habilitar:
$(".class").prop("disabled", false).removeClass("ui-state-disabled");
Inhabilitar:
$(".class").prop("disabled", true).addClass("ui-state-disabled");
Pruebe una de las declaraciones a continuación:
$(''input[type=submit]'').attr(''disabled'',''disabled'');
o
$(''input[type=button]'').attr(''disabled'',''disabled'');
ACTUALIZAR
Para apuntar a un botón en particular, dado el código HTML que proporcionó:
$(''div#DT1S input[type=button]'').attr(''disabled'',''disabled'');
Si estoy leyendo esta pregunta correctamente, puede que falte que un widget de "botón" móvil de jQuery no es lo mismo que un elemento de botón HTML. Creo que esto se reduce a que no puedas llamar al $(''input'').button(''disable'') menos que hayas llamado previamente $(''input'').button(); para inicializar un widget de botón jQuery Mobile en su entrada.
Por supuesto, es posible que no desee utilizar la funcionalidad del widget de jQuery, en cuyo caso la respuesta de Alexander debería ser la correcta.
$(document).ready(function () {
// Set button disabled
$(''#save_info'').button("disable");
$(".name").bind("change", function (event, ui) {
var edit = $("#your_name").val();
var edit_surname = $("#your_surname").val();
console.log(edit);
if (edit != ''''&& edit_surname!='''') {
//name.addClass(''hightlight'');
$(''#save_info'').button("enable");
console.log("enable");
return false;
} else {
$(''#save_info'').button("disable");
console.log("disable");
}
});
<ul data-role="listview" data-inset="true" data-split-icon="gear" data-split-theme="d">
<li>
<input type="text" name="your_name" id="your_name" class="name" value="" placeholder="Frist Name" /></li>
<li>
<input type="text" name="your_surname" id="your_surname" class="name" value="" placeholder="Last Name" /></li>
<li>
<button data-icon="info" href="" data-role="submit" data-inline="true" id="save_info">
Save</button>
Este trabajo para mí puede necesitar entrenar la lógica, desactivar - habilitar