I want to make Textarea Disable (Grayed out) in my JS Method
function myfun(status){
if(status=='Yes'){
$('input[id$="txtareaID"]').attr('disabled','disabled');
}
The above code is not working for this.
You should use prop instead of attr:
$('input[id$="txtareaID"]').prop('disabled', true);
jQuery docs
If your selector is correct, than you need only to change attr to prop:
function myfun(status){
if(status === 'Yes'){ // more suitable for comparing
$('input[id$="txtareaID"]').prop('disabled',true);
}
}
Related post:
Disable/enable an input with jQuery?
Considering textarea as
<textarea id='txt'>Something</textarea>
Using jQuery, you can achieve like this
$("#txt").attr('disabled', true);
Using plain javascript
document.getElementById("txt").disabled=true;
Your problem is with CSS not JS. As far I can tell your code is working, but there's no way of changing this specific style. You could try workarounds: Change Font Color For Disabled Input
<textarea> is what you should be looking for not the <input> tag with id = textareaid.
$('input[id$="txtareaID"]').attr('disabled','disabled');
change the above code to the below one and see the magic by clicking the link at the bottom.
$('textarea[id$="txtareaID"]').attr('disabled','disabled');
http://jsfiddle.net/5s9ge7d6/1/
none of the below answers worked.
Then I found something amazing trick which solved my problem ---
Here it is --- JUST REMOVE "input" word from that line in if block -
WORKED CODE :
function myfun(status){
if(status=='Yes'){
$('[id$="txtareaID"]').attr('disabled','disabled');
}
Previous CODE :
function myfun(status){
if(status=='Yes'){
$('input[id$="txtareaID"]').attr('disabled','disabled');
$('input[id$="txtareaID"]').prop('disabled',true); //Didn't worked either
}
Related
I don't know why I am struggling with this. Should I be taking a different approach?
I have a form being generated in vb based off a database and then I am trying simply to make a text-box be disabled unless you check a checkbox.
Here is what I have so far. It needs to be dynamic (what I have commented out).
I can't seem to get it to work. The difficult part is referencing
document.form1.el.id.toString() + "_other".disabled
disabled is a binary property, not an attrbute.
You must use disabled='disabled' or remove the attribute to enable the element. It is not a true/false value.
Here is one way:
http://jsfiddle.net/C2WaU/1/
If I understand you correct, this should work for you:
function enable_text(el) {
var textbox_name = el.id.toString() + "_other";
document.getElementById(textbox_name).disabled =
(el.checked) ? "" : "disabled";
}
A working example: http://jsfiddle.net/ve9Gz/3/
I am now using jQuery tooltip plugin to create some quick reminders for users during data input. Here is the jQuery tooltip I am using:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
However, I have encountered a problem.
How can I add a new line in the body of the tooltip?
I have tried the following codes, but still cannot get it done.
?
?
So could anyone help me on this issue?
Thanks~
I think
<br/>
should do the trick.
For example:
?
Do you mean a line break? I'd recommend using a CSS rule to add a margin to the anchor tag. Else insert some <br />'s between the 2 a tags.
You could "encode" your line breaks and use the bodyHandler attribute, like:
The documentation shows examples of linking to a #id in the href, which will display the content of that #id. So place a element with your and #id somewhere on your page, and specifiy that as the tooltip, like:
<a id="yourLink" href="Hello#world">Some text</a>
$("#yourLink").tooltip({
bodyHandler: function() {
var href_value = $(this).attr("href");
return href_value.replace("#","<br/>");
}
});
I'm using it this way (jQuery 1.9 and standard tooltip function):
$(".myClass").tooltip({
content: function() {
return $(this).attr('title');
}
})
And then in the title you can use HTML
Example:
<span title="Line1 <br> Line 2 <br> <b>Bold</b><br>">(?)</span>
You can't just paste the HTML as string, as other people said you have to use content.
I'm working on a .net website that validates an input and if it fails adds an inline style
"display:inline;"
Im trying to use jQuery to see this style and add a class to the respective input field.
if(!!$('span.errorp').length ){
alert('hi');
}
the above is what im currently using to ensure i can target the correct tag which works,
I guess i need something similar too...
if(!!$('span.errorp').display:inline ){
alert('hi');
}
Try the following
if ($('span.errorp').css('display') === 'inline') {
...
}
You can use something like:
$('span.errorp').css('display', 'inline');
It's not necessary to check for length. If there are no matches, nothing happens.
if($('span.errorp[style=display:inline]')) {
// do stuff
}
i have a hidden input like this:
<input type="hidden" id="selectedItem" value="1,1,1," name="selectedItem"/>
and i want to replace some values of it to:
value="9,9,9"
i tried to used
document.getElementById('selectedItem').value = document.getElementById('selectedItem').value.replace(/1/gi,'9')
or
document.getElementById('selectedItem').value = document.getElementById('selectedItem').value.replace('1','9')
but it didnot work. Please someone tells me why and give me some solutions.
Thank You
Why not use jquery? Something like the following:
$('input#selectedItem').value('9,9,9');
$("#selectedItem").val("9,9,9");
//or
$("#selectedItem").val($("#selectedItem").val().replace(/1/gi,'9'));
It works just fine for me: http://jsfiddle.net/QRHTL/
It would be a bit cleaner with jQuery though:
$('#selectedItem').val($('#selectedItem').val().replace(/1/gi,'9'));
Do you have another element on your page with id="selectedItem"? If so, document.getElementById("selectedItem") might return that instead of the hidden form input you're expecting it to.
I have a link to hide/display some text:
<a href="javascript:void(0);" id="toggle_status_history">show/hide history<a/>
The corresponding JavaScript looks like this:
$(document).ready(function() {
$('#toggle_status_history').click(function() {
if ($('#status_history').is(":hidden")) {
$('#status_history').slideDown("fast");
} else {
$('#status_history').slideUp("fast");
}
});
It works great, but I'd like to toggle the hyperlink text as well. What do I need to do to modify the 'show/hide history' to show either 'hide history' (if it's currently displayed) or 'show history' if it's currently hidden? Something like this..?
$(document).ready(function() {
$('#toggle_status_history').click(function() {
if ($('#status_history').is(":hidden")) {
$('#status_history').slideDown("fast");
// SOMETHING HERE TO SET TEXT TO 'HIDE HISTORY'
} else {
$('#status_history').slideUp("fast");
// SOMETHING HERE TO SET TEXT TO 'SHOW HISTORY'
}
});
Disclaimer: I have less than an hour of experience with JQuery (and I haven't used JavaScript since the late-90s) - I'm just trying to modify a code sample for my site. I've looked at the API for the toggle() and replaceWith() functions but am not getting it to work. Googling and RTFM'ing hasn't helped me so far.
$('#status_history').text("Whatever you want it to say");
Have a look at the jQuery Documentation. They have a very good documentation which explains everything, with examples. For example, the .text(str); function is underneath manipulation.
$('#toggle_status_history').text("Show history");
$('#status_history').text("Hide/Show History"); is what you need.
The better way of doing such things is using toggle method provided by jQuery, it accepts a list of functions which will be looped on each click. So that you don't need to do is(':hidden')
$('#status_history').val("bla bla bla..");
try this...
fn.val() is getting the value of input, select or textarea's value or text ;)
fn.val(newValue) is setting new values ;)
$(document).ready(function() {
$('#toggle_status_history').click(function() {
$('#status_history').toggle('slow')
$("#toggle_status_history").text(($("#toggle_status_history").text()=='show')?'hide':'show');
}
});