CODE:
<script type="text/javascript">
$(document).ready(function() {
$("#clicker").click(function() {
$(".show_this").show();
e.preventDefault();
});
});
</script>
Using the script above I am able to show .show_this on clicking #clicker but on clicking #clicker again i want to hide it. How can I tweak my code to do that?
I did some research and it seemed that by using e.preventDefault(); I would be able to achieve that but it didn't work.
You can use toggle();
$(".show_this").toggle();
This will toggle every time, so if it is hidden it will show it and vice versa
Api Documentation: http://api.jquery.com/toggle
Also event.preventDefault(); will not be able to do this, though it is useful if the .show-this is a anchor tag because it will prevent the default action and that is to follow the link.
Use .toggle() instead.
$(document).ready(function() {
$("#clicker").click(function(e) {
$(".show_this").toggle();
e.preventDefault();
});
});
jsFiddle example
You can do this using the .toggle() method like:
$(document).ready(function() {
$("#clicker").click(function(e) { // call the event variable 'e' first here
e.preventDefault();
$(".show_this").toggle();
});
});
This is pretty standard stuff here, and I cannot understand why it isn't working.
When the enable function is called, I receive my alert but the select fields are still disabled. Any thoughts?
$(window.document).ready(function() {
$('#selectmenu1').attr('disabled','true');
$('#selectmenu2').attr('disabled','true');
$('#selectmenu3').attr('disabled','true');
});
function enableCoreChange(){
alert('called');
$('#selectmenu1').attr('disabled','false');
$('#selectmenu2').attr('disabled','false');
$('#selectmenu3').attr('disabled','false');
}
The click event:
Click here to enable
It's driving me crazy!
Pass a boolean, not a string, as the second parameter of .attr().
$(function() { // use document ready shorthand
// combine the selectors to stay DRY
$('#selectmenu1, #selectmenu2, #selectmenu3').attr('disabled', true);
});
function enableCoreChange() {
$('#selectmenu1, #selectmenu2, #selectmenu3').attr('disabled', false);
// alternately:
$('#selectmenu1, #selectmenu2, #selectmenu3').removeAttr('disabled');
}
Note the other general style improvements as well.
HTML:
Click here to enable
jQuery:
function enableCoreChange(){
$('#selectmenu1, #selectmenu2, #selectmenu3').prop('disabled', false);
}
$(document).ready(function(){
$('#selectmenu1, #selectmenu2, #selectmenu3').prop('disabled', true);
$('#enable').on('click',function(e){
e.preventDefault();
enableCoreChange();
});
});
demo jsFiddle
Note:
Instead of $('#selectmenu1, #selectmenu2, #selectmenu3'): starts with ^ selector:
$('select[id^="selectmenu"]').prop('disabled', false);
The attribute "disabled" does not need a value (backward compatibility) as soon as this attribute is available, it is disabled.
To activate it again use this function:
function enableCoreChange(){
alert('called');
$('#selectmenu1').removeAttr('disabled');
$('#selectmenu2').removeAttr('disabled');
$('#selectmenu3').removeAttr('disabled');
}
You should be using .prop() instead of .attr()
http://api.jquery.com/prop/
The problem here is you're specifying the string 'false' instead of the boolean false. Personally I'd use removeAttr for clarity
function enableCoreChange(){
alert('called');
$('#selectmenu1').removeAttr('disabled');
$('#selectmenu2').removeAttr('disabled');
$('#selectmenu3').removeAttr('disabled');
}
Fiddle: http://jsfiddle.net/6pznn/
I want to disable this button on document ready but I'm new to it so please help:
Here is my code:
$(document).ready function {
setTimeout("check_user()", 250);
}
please help
If button's id is button1, this should work.
$('#button1').attr('disabled', 'disabled');
The correct way to disable a button in current versions of jQuery is:
$('#btnid').prop('disabled', true);
.attr() is the old way. See the jQuery 1.6.1 release notes for more information.
$(document).ready(function(){
$('#btnId').attr('disabled', 'disabled');
});
$(function(){
$('#button').attr('disabled', 'disabled');
});
$(document).ready(function(){
$('#buttonclass').attr('disabled', true);
});
I can't seem to get removeAttr to work, I'm using the example I saw on the jQuery site. Basically onclick I add the attribute to disable a field (which works just fine) but when the user clicks again it should enable the field in question. I used alerts to make sure the else block is being fired, so I know that's not it.
Code:
$('#WindowOpen').click(function (event) {
event.preventDefault();
$('#forgot_pw').slideToggle(600);
if('#forgot_pw') {
$('#login_uname, #login_pass').attr('disabled','disabled');
} else {
$('#login_uname, #login_pass').removeAttr('disabled');
}
});
Thanks.
All good used this:
$('#WindowOpen').toggle(
function()
{
$('#login_uname, #login_pass').attr("disabled","disabled");
},
function()
{
$('#login_uname, #login_pass').removeAttr("disabled");
});
Your problem is that the following line of code will always evaluate to true.
if('#forgot_pw')
try replacing with
if($('#forgot_pw').attr('disabled'))
$('#forgot_pw').attr('disabled', false);
should work for you.
$input.disabled = true;
or
$input.disabled = "disabled";
Which is the standard way? And, conversely, how do you enable a disabled input?
jQuery 1.6+
To change the disabled property you should use the .prop() function.
$("input").prop('disabled', true);
$("input").prop('disabled', false);
jQuery 1.5 and below
The .prop() function doesn't exist, but .attr() does similar:
Set the disabled attribute.
$("input").attr('disabled','disabled');
To enable again, the proper method is to use .removeAttr()
$("input").removeAttr('disabled');
In any version of jQuery
You can always rely on the actual DOM object and is probably a little faster than the other two options if you are only dealing with one element:
// assuming an event handler thus 'this'
this.disabled = true;
The advantage to using the .prop() or .attr() methods is that you can set the property for a bunch of selected items.
Note: In 1.6 there is a .removeProp() method that sounds a lot like removeAttr(), but it SHOULD NOT BE USED on native properties like 'disabled' Excerpt from the documentation:
Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.
In fact, I doubt there are many legitimate uses for this method, boolean props are done in such a way that you should set them to false instead of "removing" them like their "attribute" counterparts in 1.5
Just for the sake of new conventions && making it adaptable going forward (unless things change drastically with ECMA6(????):
$(document).on('event_name', '#your_id', function() {
$(this).removeAttr('disabled');
});
and
$(document).off('event_name', '#your_id', function() {
$(this).attr('disabled','disabled');
});
// Disable #x
$( "#x" ).prop( "disabled", true );
// Enable #x
$( "#x" ).prop( "disabled", false );
Sometimes you need to disable/enable the form element like input or textarea. Jquery helps you to easily make this with setting disabled attribute to "disabled".
For e.g.:
//To disable
$('.someElement').attr('disabled', 'disabled');
To enable disabled element you need to remove "disabled" attribute from this element or empty it's string. For e.g:
//To enable
$('.someElement').removeAttr('disabled');
// OR you can set attr to ""
$('.someElement').attr('disabled', '');
reference: http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html
$("input")[0].disabled = true;
or
$("input")[0].disabled = false;
There are many ways using them you can enable/disable any element :
Approach 1
$("#txtName").attr("disabled", true);
Approach 2
$("#txtName").attr("disabled", "disabled");
If you are using jQuery 1.7 or higher version then use prop(), instead of attr().
$("#txtName").prop("disabled", "disabled");
If you wish to enable any element then you just have to do opposite of what you did to make it disable. However jQuery provides another way to remove any attribute.
Approach 1
$("#txtName").attr("disabled", false);
Approach 2
$("#txtName").attr("disabled", "");
Approach 3
$("#txtName").removeAttr("disabled");
Again, if you are using jQuery 1.7 or higher version then use prop(), instead of attr(). That's is. This is how you enable or disable any element using jQuery.
Use like this,
$( "#id" ).prop( "disabled", true );
$( "#id" ).prop( "disabled", false );
You can put this somewhere global in your code:
$.prototype.enable = function () {
$.each(this, function (index, el) {
$(el).removeAttr('disabled');
});
}
$.prototype.disable = function () {
$.each(this, function (index, el) {
$(el).attr('disabled', 'disabled');
});
}
And then you can write stuff like:
$(".myInputs").enable();
$("#otherInput").disable();
If you just want to invert the current state (like a toggle button behaviour):
$("input").prop('disabled', ! $("input").prop('disabled') );
this works for me
$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);
Update for 2018:
Now there's no need for jQuery and it's been a while since document.querySelector or document.querySelectorAll (for multiple elements) do almost exactly same job as $, plus more explicit ones getElementById, getElementsByClassName, getElementsByTagName
Disabling one field of "input-checkbox" class
document.querySelector('.input-checkbox').disabled = true;
or multiple elements
document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);
You can use the jQuery prop() method to disable or enable form element or control dynamically using jQuery. The prop() method require jQuery 1.6 and above.
Example:
<script type="text/javascript">
$(document).ready(function(){
$('form input[type="submit"]').prop("disabled", true);
$(".agree").click(function(){
if($(this).prop("checked") == true){
$('form input[type="submit"]').prop("disabled", false);
}
else if($(this).prop("checked") == false){
$('form input[type="submit"]').prop("disabled", true);
}
});
});
</script>
An alternate way to disable the input field is by using jQuery and css like this:
jQuery("#inputFieldId").css({"pointer-events":"none"})
and to enable the same input the code is as follows:
jQuery("#inputFieldId").css({"pointer-events":""})
Disable:
$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.
Enable:
$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.
Disable true for input type :
In case of a specific input type (Ex. Text type input)
$("input[type=text]").attr('disabled', true);
For all type of input type
$("input").attr('disabled', true);
<html>
<body>
Name: <input type="text" id="myText">
<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>
<script>
function disable() {
document.getElementById("myText").disabled = true;
}
function enable() {
document.getElementById("myText").disabled = false;
}
</script>
</body>
</html>
I used #gnarf answer and added it as function
$.fn.disabled = function (isDisabled) {
if (isDisabled) {
this.attr('disabled', 'disabled');
} else {
this.removeAttr('disabled');
}
};
Then use like this
$('#myElement').disable(true);
2018, without JQuery (ES6)
Disable all input:
[...document.querySelectorAll('input')].map(e => e.disabled = true);
Disable input with id="my-input"
document.getElementById('my-input').disabled = true;
The question is with JQuery, it's just FYI.
Approach 4 (this is extension of wild coder answer)
txtName.disabled=1 // 0 for enable
<input id="txtName">
In jQuery Mobile:
For disable
$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');
For enable
$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');