This is for jQuery Mobile. Not all regular jQuery answers will work.
I can't get my buttons to disable in jQuery Mobile.
jQuery Mobile says to use
$('input').button('disable');
But I get an error message in Firebug:
uncaught exception: cannot call methods on button prior to initialization; attempted to call method 'disable'.
It's in the document ready section of my page so I dont know how it's not initialized yet.
I've tried calling the button directly by its id but that doesn't work.
I've tried:
$('button').attr("disabled", "disabled");
Doesn't work.
I also have a switch command that will enable one button based on what the value is. I've got that part to where its routing to right "case" statements, but the enable/disable buttons thing in jQuery mobile is not working.
This question is related to
jquery
jquery-mobile
I created a widget that can completely disable or present a read-only view of the content on your page. It disables all buttons, anchors, removes all click events, etc., and can re-enable them all back again. It even supports all jQuery UI widgets as well. I created it for an application I wrote at work. You're free to use it.
Check it out at ( http://www.dougestep.com/dme/jquery-disabler-widget ).
$(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>
This one work for me you might need to workout the logic, of disable -enable
You are getting that error probably because the element is not within the DOM yet. $(document).ready(); will not work. Try adding your code to a pageinit event handler.
Here is a working example:
<!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>
Hope that helps someone
For disabling a button add css class disabled to it . write
$("button").addClass('disabled')
For link button,
Calling .button('enable') method only gives effect, but functionally don't.
But I have a trick. We could use HTML5 data- attribute to save/swap value of href and onclick.
see:
source code mode:
Try one of the statements below:
$('input[type=submit]').attr('disabled','disabled');
or
$('input[type=button]').attr('disabled','disabled');
UPDATE
To target a particular button, given the HTML you provided:
$('div#DT1S input[type=button]').attr('disabled','disabled');
Based on my findings...
This Javascript error occurs when you execute button() on an element with a selector and try to use a function/method of button() with a different selector on the same element.
For example, here is the HTML:
<input type="submit" name="continue" id="mybuttonid" class="mybuttonclass" value="Continue" />
So you execute button() on it:
jQuery(document).ready(function() { jQuery('.mybuttonclass').button(); });
Then you try to disable it, this time not using the class as you initiated it but rather using the ID, then you'll get the error as this thread is titled:
jQuery(document).ready(function() { jQuery('#mybuttonid').button('option', 'disabled', true); });
So rather use the class again as you initiated it, that'll resolve the problem.
What seems to be needed is to actually define the button as a button widget.
I had the same problem (in beta 1)
I did
$("#submitButton").button();
in my window ready handler, after that it worked to do as it is said in the docs, i.e.:
$("#submitButton").button('disable');
I guess this has to do with that jqm is converting the markup, but isnt actually instatiating a real button widget for buttons and link buttons.
For jQuery Mobile 1.4.5:
for anchor buttons, the CSS class is: ui-state-disabled, and for input buttons it is just enough to toggle the disabled attribute.
function toggleDisableButtons() {_x000D_
$("#link-1").toggleClass("ui-state-disabled", !$("#link-1").hasClass("ui-state-disabled"));_x000D_
$("#button-1").attr("disabled") ? $("#button-1").removeAttr("disabled") : $("#button-1").attr("disabled","");_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">_x000D_
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">_x000D_
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>_x000D_
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
<div data-role="page" id="page-1">_x000D_
<div role="main" class="ui-content">_x000D_
<button class="ui-btn" onclick="toggleDisableButtons();">Toggle disabled</button>_x000D_
<a id="link-1" href="#" class="ui-btn ui-state-disabled">Anchor</a>_x000D_
<button id="button-1" disabled="">Button</button>_x000D_
_x000D_
</div>_x000D_
</div>_x000D_
</body>_x000D_
</html>BTW, for input buttons, there is an alternate method:
Enable:
$(".class").prop("disabled", false).removeClass("ui-state-disabled");
Disable:
$(".class").prop("disabled", true).addClass("ui-state-disabled");
If I'm reading this question correctly, you may be missing that a jQuery mobile "button" widget is not the same thing as an HTML button element. I think this boils down to you can't call $('input').button('disable') unless you have previously called $('input').button(); to initialize a jQuery Mobile button widget on your input.
Of course, you may not want to be using jQuery button widget functionality, in which case Alexander's answer should set you right.
uncaught exception: cannot call methods on button prior to initialization; attempted to call method 'disable'.
this means that you are trying to call it on an element that is not handled as a button, because no .button method was called on it. Therefore your problem MUST be the selector.
You are selecting all inputs $('input'), so it tries to call the method disable from button widget namespace not only on buttons, but on text inputs too.
$('button').attr("disabled", "disabled"); will not work with jQuery Mobile, because you modify the button that is hiden and replaced by a markup that jQuery Mobile generates.
You HAVE TO use jQueryMobile's method of disabling the button with a correct selector like:
$('div#DT1S input[type=button]').button('disable');
Source: Stackoverflow.com