Hi I am trying to get this JavaScript work for me.
Can any one help me with this.
When user clicks the Check box the next text box should disable,
if unchecked then enable.
selectors are working fine when I debug scrip in IE9 developer tool.
function is running fine as needed.
<input id="RefillNeeded10" name="RefillasNeeded" type="checkbox" value="true">
<input type="text" size="5" id="RefillTB10," name="Refills">
$('input[type="checkbox"][name^="RefillasNeeded"]').click(function () {
var num = $(this).attr('id').replace("RefillNeeded", "");
if ($('input[type="checkbox"][id="RefillNeeded' + num + '"]').attr("checked")) {
$('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", true);
}
else {
$('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", false);
}
});
but $('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", true);
this is not creating the attribute disable.
I have this listed here for convenience.
Your selector isn't matching any elements. It looks like you have a typo in your HTML - there is a trailing , in the id of the text box. Remove the comma from your id attribute, and it should work. http://jsfiddle.net/gilly3/KJVCa/13/
By the way, you don't need that big long selector to get the checkbox and test if it is checked. You already have a reference to it as this. And you can just check its checked property:
if (this.checked)
While we're at it, why not really simplify things. You don't need to parse the id, just get the next element (assuming your textbox always follows your checkbox). You don't need an if, just use the boolean directly. Your code can be shrunk down to just this:
$("input[type=checkbox][name^=RefillasNeeded]").click(function () {
$(this).next().attr("disabled", this.checked);
});
See it here: http://jsfiddle.net/gilly3/KJVCa/15/
Also for the javascript I had to change
$('input[type="checkbox"][id="RefillNeeded' + num + '"]').attr("checked")
To
$('input[type="checkbox"][id="RefillNeeded' + num + '"]').is(":checked")
to get it to work.
Change
$('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", "disabled");
and
$('input[type="text"][id="RefillTB' + num + '"]').attr("disabled", "");
to
$('input[type="text"]["#RefillTB' + num + '"]').attr("disabled", "disabled");
and
$('input[type="text"]["#RefillTB' + num + '"]').removeAttr("disabled");
respectively.
Related
I have a function:
function factCheck(index) {
if (arrayOfSites[index].indexOf("pdf") > -1) {
$('#20').attr('style', 'color: red');
$('#' + index).attr('style', 'color: red');
console.log('index: ' + index);
console.log($("#" + index).text());
}
}
So my question is. The text color of the element changes color when I use $('#20') but when I use, $('#' + index) it doesn't work.
Funny thing is, I with console.log.. it logs the text of the element but I can't effect the css of it.
Why is this happening?
// after a three hour meeting.. I came back with some really great answers!! Thank you!!
edit:
the code below shows how I'm snagging all the links on the page and add the id equal to the index of that item. So that's why I'm trying to grab that link, and effect it in some way. I appreciate all you guys.. I think I'm going to take the string and add a letter to it as they come in through the function and then manipulate the anchor from that point. I just wonder if there's a more efficient way of doing this.
$(".lpage a").each(function (index) {
// console.log(index + ": " + $(this).text());
str = $(this).attr('href');
arrayOfSites.push(str);
str = arrayOfSites[index];
title = $(this).attr('title');
parseURL(str);
$('.colContent2').append(cellOpen + '<a onclick="whichFunction(' + index + ');" id= "' + index + '"style="cursor:pointer;" class="injectedLinkCol2" >' + str + '</a>' + cellClose).prop("id", index);
});
Maybe it has something to do with the name of your id attribute. Take a look at this answer.
Try to use the toString() function:
function factCheck(index) {
if (arrayOfSites[index].indexOf("pdf") > -1) {
$('#20').attr('style', 'color: red');
$('#' + index.toString()).attr('style', 'color: red');
console.log('index: ' + index);
console.log($( "#" + index.toString() ).text());
}
}
An id name or class name must begin with a name must begin with an underscore (_), a hyphen (-), or a letter(a–z).
So something like
'#d20'
would work.
See this: Valid CSS Selectors.
I couldn't reproduce the exact problem. I made a pen (link) and tried what you asked but it works well. So it must be some error in the remaining code.
on a related note
In CSS id's are not allowed to start with a number(classes are allowed). So writing something like
#20{
color: red;
}
won't work, but the rule only applies to css. JQuery will still work, which means your only option's are to write inline styles or use JQuery's .attr or .css, but jQuery.attr() will reset all your inline styles. you are left with using .css(). So, it's better to not start your id's with numbers.
try using .css instead of .attr and see if it works.
$('.exampleClass:eq(' + index + ')').css("color", "yellow");
for some reason works
$('.exampleClas').eq(index).css("color", "yellow");
does not work.
my code is:
$('select').change(function(){
$('.sep14, .oct14').hide();
var userChoice = "'." + $('select').val() + "'";
$(userChoice).show();
});
So, when the user changes the dropdown list the two divs with those classes hide and then the variable stores the userChoice as something jquery can recognise which is then shown again, using .show().
For some reason though, this doesn't seem to work, anyone know why?
Thanks
You don't have to use ' on var userChoice = "'." + $('select').val() + "'";
Code :
$('select').change(function() {
$('.sep14, .oct14').hide();
var userChoice = "." + $('select').val();
$(userChoice).show();
});
Demo
Also, this is somewhat weird way to achieve what you are doing, consider using data- attributes instead where you can create custom attributes with values, which are completely valid as of HTML5 like :-
$('select').change(function(){
$('[data-toggler]').hide();
$('[data-toggler=' + $(this).val() + ']').show();
});
Demo 2
I've got the following:
$('#edit-profile-main-field-county-und option[value=' + code + ']').attr('selected', true);
The element is a select list with multiple options (and multiple options can be selected at once).
code is a variable that contains a value for the select list options.
Basically, I want to check if the option with code as the value is selected, and if it is, unselect it, rather than select it, like it is right now.
Every example I'm seeing checks ALL the selected values, and that's just not necessary in my case. This is for a select/unselect function on a map.
This is how I solved the problem:
if($('#edit-profile-main-field-county-und option[value=' + code + ']').attr('selected') == 0) {
$('#edit-profile-main-field-county-und option[value=' + code + ']').attr('selected', true);
}
else if($('#edit-profile-main-field-county-und option[value=' + code + ']').attr('selected') == 1) {
$('#edit-profile-main-field-county-und option[value=' + code + ']').attr('selected', false);
}
if you are using jquery > 1.6 you can use prop method like this
var option = $('#edit-profile-main-field-county-und option[value=' + code + ']');
option.prop('selected', !option.prop('selected'));
I have the following code, where soundid is an integer between (not including) 0 and 11, and all the element names exist. Currently, it does not focus in many browsers. What should I add, modify or change it into to make it able to focus into an input type="text" element?
Code:
document.getElementById("fo" + soundid + "cus").click();
document.getElementById("fo1cus").click();
$("#spellingf" + soundid).select();
$("#spellingf" + soundid).focus();
document.getElementById("spellingf" + soundid).focus();
$("#fo" + soundid + "cus").click();
Thank you!
Native HTML Elements don't have an click method. So this:
document.getElementById("fo" + soundid + "cus").click();
and this:
document.getElementById("fo1cus").click();
will throw an error. The error will stop the code execution s the rest of the code won't be executed. That's why it doesn't work. So use this code:
$("#fo" + soundid + "cus").click();
$("#fo1cus").click();
$("#spellingf" + soundid).focus();
$("#fo" + soundid + "cus").click();
Not really sure what you're asking here tbh.
Giving your input and id attribute and selecting on that id will work cross browser.
$('#fo1cus').focus(function() {
alert('Handler for .focus() called.');
});
I have this line of code. It works just fine, but I'm wondering if there's a smarter (read: shorter) way of doing it?
svg.getElementById($(this).attr('id')).childNodes[0].childNodes[0].nodeValue = $(this).val();
I'm using jQuery as well, so any jQuery methods are fine :)
The markup being reached is
<text id=n>
<tspan>text to reach</tspan>
</text>
It would be ideal, however, if I could reach the text even if the tags were removed.
This should let you change the text:
$("#" + $(this).attr("id") + " tspan").text($(this).val());
This might be a kludge, but it'll substitute the end node value of a text element whether it has a tspan element or not. This example acts on an input field with a class of 'replace'.
$('.replace').keyup(function() {
if ($("#" + $(this).attr("id")).has("tspan").length) {
$("#" + $(this).attr("id") + " tspan").text($(this).val());
} else {
$("#" + $(this).attr("id")).text($(this).val());
}
}