I have an input box and I want it to be disabled and at the same time hide it to avoid problems when porting my form.
So far I have the following code to hide my input:
$(".shownextrow").click(function() {
$(this).closest("tr").next().show().find('.longboxsmall').hide();
});
This is the input that gets hidden as a result:
<input class="longboxsmall" type="text" />
How can I also add the disabled attribute to the input?
$("input").attr("disabled", true); as of... I don't know any more.
It's December 2013 and I really have no idea what to tell you.
First it was always .attr(), then it was always .prop(), so I came back here updated the answer and made it more accurate.
Then a year later jQuery changed their minds again and I don't even want to keep track of this.
Long story short, as of right now, this is the best answer: "you can use both... but it depends."
You should read this answer instead: https://stackoverflow.com/a/5876747/257493
And their release notes for that change are included here:
Neither .attr() nor .prop() should be used for getting/setting value. Use the .val() method instead (although using .attr("value", "somevalue") will continue to work, as it did before 1.6).
Summary of Preferred Usage
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
Or in other words:
".prop = non-document stuff"
".attr" = document stuff
...
...
May we all learn a lesson here about API stability...
Working code from my sources:
HTML WORLD
<select name="select_from" disabled>...</select>
JS WORLD
var from = jQuery('select[name=select_from]');
//add disabled
from.attr('disabled', 'disabled');
//remove it
from.removeAttr("disabled");
If you're using jQuery then there are a few different ways to set the disabled attribute.
var $element = $(...);
$element.prop('disabled', true);
$element.attr('disabled', true);
// The following do not require jQuery
$element.get(0).disabled = true;
$element.get(0).setAttribute('disabled', true);
$element[0].disabled = true;
$element[0].setAttribute('disabled', true);
$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true);
element.disabled = true;
element.setAttribute('disabled', true);
All of the above are perfectly valid solutions. Choose the one that fits your needs best.
You can get the DOM element, and set the disabled property directly.
$(".shownextrow").click(function() {
$(this).closest("tr").next().show()
.find('.longboxsmall').hide()[0].disabled = 'disabled';
});
or if there's more than one, you can use each() to set all of them:
$(".shownextrow").click(function() {
$(this).closest("tr").next().show()
.find('.longboxsmall').each(function() {
this.style.display = 'none';
this.disabled = 'disabled';
});
});
Since the question was asking how to do this with JS I'm providing a vanilla JS implementation.
var element = document.querySelector(".your-element-class-goes-here");
// it's a good idea to check whether the element exists
if (element != null && element != undefined) {
element.disabled = "disabled";
}
Just use jQuery's attr() method
$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');
in JQuery you can use the following functions:
$("input").prop('disabled', true);
$("input").prop('disabled', false);
For native js you can use:
document.getElementById("myElement").disabled = true;
Related
Simple question, so I made sure to try and a lot of solutions before posting this. I have a checkbox and I can't seem to enable it.
With vanilla JS, I've tried removing the attribute, as well as setting the disabled flag to false, and also using jQuery i've tried to use the Prop to no success.
'''html
<input type="checkbox" id="chkAllowToAdminService" name="chkAllowToAdminService" disabled="disabled" data-init-plugin="switchery">
'''
I've tried the following and none of them are working (vanilla JS and jQuery)
'''
document.getElementById('chkAllowToAdminService').disabled = false;
document.getElementById('chkAllowToAdminService').removeAttribute('disabled);
$('#chkAllowToAdminService').prop("disabled", false);
'''
No error messages at all, just nothing seems to be happening.
To remove attribute you may use removeAttribute(name). In your case:
const checkbox = document.querySelector('#chkAllowToAdminService')
checkbox.removeAttribute('disabled')
To set attribute setAttribute(name, value).
// In jQuery
$('#chkAllowToAdminService').attr('disabled','disabled'); // Add disabled
$('#chkAllowToAdminService').removeAttr('disabled',''); // Remove disabled
// OR
$("#chkAllowToAdminService").attr("disabled",true);
$("#chkAllowToAdminService").attr("disabled",false);
// In JavaScript
document.getElementById("chkAllowToAdminService").disabled = true;
document.getElementById("chkAllowToAdminService").disabled = false;
I think you might have two issue :
make sure you have unique id of element 'chkAllowToAdminService' no other element have same id.
in your remove attribute syntex : document.getElementById('chkAllowToAdminService').removeAttribute('disabled);
I can see quote ' is missing at last.
I have a dropdown box and I want to select the option based on value. Somehow I am getting handle to value say 3. Now I want to manually select the option which has got value 3.
I have tried something like this
selectBoxElement.options[selectedValues].selected = true;
where selectedValue = 3, but it is not working.
If using jquery (as per your tag), you can do:
$(document).ready(function() {
$("#yourSelectId option[value='3']").attr("selected", "selected");
});
Something like that should work (assuming $ is not overwritten and is alias for jQuery):
$(selectBoxElement).find('option[value="selectedValue"]').prop('selected', true);
or rather:
$(selectBoxElement).val(selectedValue);
which is simpler and achieves similar result :)
If you're using plain JS (except for the jQuery tag, you didn't explicitly say whether you want plain JS or jQuery), this should do what you want:
for (i=0; i<selectBoxElement.options.length; i++) {
if (selectBoxElement.options[i].value == selectedValues) {
selectBoxElement.options[i].selected=true;
break;
}
}
This is simple please try the following
When using the index position of the option tag within the select box
selectBoxElement.selectedIndex = index; // Where the index starts from 0
When using the value
selectBoxElement.value = value;// Where the value is the attribute defined within option tag
Hope this solves your problem.
I am able to disable a text box using mootools but after disabling it I am not able to enable it back.
Please see the code underneath.
Here 'mg' is id of a text box.
window.addEvent('domready', function(){
$('mg').setAttribute('disabled','true');
//$('mg').disabled = false this works fine
//does not enable text box
$('mg').setAttribute('disabled','false');
});
Here is jsfiddle link.
http://jsfiddle.net/GgyCH/2/
please help me out on this.Thanks
Using mootools you can use Element method set, to actually set attributes, like so http://jsfiddle.net/steweb/p6BDb/
js:
var elem = $('mg');
elem.set('disabled','disabled'); //disable
elem.set('disabled',''); //enable
Use: $('mg').setAttribute('disabled','');
(or just remove the attribute)
"disabled", like "selected" is not a true/false attribute. It should actually be:
$('mg').setAttribute('disabled','disabled'); to set it
just change the value directly in the attribute of the object
alert($('mg').disabled);
$('mg').disabled = true;
alert( $('mg').disabled);
$('mg').disabled = false;
alert($('mg').disabled);
http://jsfiddle.net/GgyCH/3/
hope this helps
Javascript 101:
$('mg').setAttribute('disabled', true);
$('mg').removeAttribute('disabled');
Cannot get this to work. First time using variables passed into functions. Unchecking radio button should disable form field and vice versa. lineid variable distinguishes this radio/text input pair from 10 others.
My code:
<script type="text/javascript">
function disablefield(lineid){
if (document.getElementById(lineid).checked == true){
document.dupedit.lineid.disabled = false;
} else {
document.dupedit.lineid.disabled = true;
}
}
</script>
Subset of my HTML.
You need to pass a string into your disablefield function, so put the value in quotes when you pass it in. Something like:
<input onclick="disablefield('2671997')" />
This is because document.getElementById expects a string, not an integer.
Secondly, to enable/disable the field, you need to use disabled = true; rather than = 'disabled'.
document.dupedit.lineid is looking a for a field with name "lineid", which doesn't exist in your form. I would suggest giving the field an id and using document.getElementById again instead.
If you want to continue using the name attribute, you will have to use document.getElementsByName instead. This returns an array of matching elements (since multiple elements can share the same name), but if in your code you know that the element in question is the only one with that name, you can do this:
document.getElementsByName(lineid)[0].disabled = true;
You can see a working version (I think this is how you wanted it anyway) here. And here is a version using getElementsByName.
You are missing a closing brace on the function:
function disablefield(lineid){
if (document.getElementById(lineid).checked == true){
document.dupedit.lineid='enabled';
}else{
document.dupedit.lineid='disabled';
}
} //<-- here
Also, can I suggest you pass this to the function. Then you don't have to call getElementById
<input onclick='disablefield(this)' type.....
function disablefield(obj){
if (obj.checked == true){
document.dupedit.lineid='enabled';
}else{
document.dupedit.lineid='disabled';
}
}
I think what you need is to re-think the code.
Don't use ID on the checkbox. Better move that ID to the text field you want to disable/enable and check whether that field is disabled/enabled, not the checkbox itself
use cleaner JS.
Please, take a look at the jsFiddle, I have compiled for you. Does it do what you expect, Dan?
Ok dokey, got a bit of jquery up and running, lovely stuff.
$(document).ready(function() {
$inputs = $("#tbxProdAC, #ddlBuyer, #txtbxHowMany, radTopx");
$.each($inputs, function() {
$(this).focus(function() {
$.each($inputs, function() {
$(this).val('');
$(this).attr('checked', false);
})
});
})
});
However, in my drop down list, I wish to retain the orignal value rather than clear it altogether.
Is there a way I can specify the individual values i.e. tbxProdAC ='', ddlBuyer = Original Value, txtbxHowMany='', radTopx =unchecked, etc?
have you tryed:
document.getElementById('formId').reset();
try it this way:
$(document).ready(function() {
$("#tbxProdAC, #ddlBuyer, #txtbxHowMany, radTopx").focus(function() {
document.getElementById('formId').reset();
});
});
You'll have to go through each one separately to do that.
i.e.
$('#tbxProcAC').val('');
$('#ddlBuyer').val($('#ddlBuyer')[0].defaultValue);
$('#txtbxHowMany').val('');
$('#radTopx').attr('checked',false);
Perhaps the second line there may be of most intrest to you - it shows how to access the original 'default' value.
Comment if you've any questions, good luck!
You can use the data function in JQuery - you can store all the existing values and call them again when you need them
in JQuery can select First Option <option value="0" > </option> first option value is zero and text is empty.
now
$('#DropDown').find('option:first').attr('selected', 'selected');
$('#DropDown')[0].selectedIndex = 0;
$('#DropDown') -> select dropdown
find('option:first') -> find first option
attr('selected', 'selected') -> set attribute selected.
Try this simple way
document.getElementById(‘drpFruits’).options.length=0;