We Keep Coding

How can I add a disable class to a single select, not all of that I have

I want to put a disabled class into my select, but when I do this:
$("input").attr("disabled",true);
//I tried to to this but it didn't work too:
$("#myId").attr("disabled",true);
It disable all of my selects and not one.
How can I disable only "myId"?

Without seeing your HTML (which at the time of writing has not been supplied) it's very difficult for us to tell you why it's not working.
However, if $("#myId").attr("disabled",true); isn't working, then it suggests to me that you do not have an element in your HTML with id='myId'.
Things to check in the rendered HTML (as seen by the browser, not your code)...
Is there an element with an id of myId
Is the id exactly myId, and not myID for instance (as the case is important)
Are you using something like ASP.Net where naming containers could be changing the id of the rendered control to something like ctl00_myId
Do you have 2 elements with an id of myId... in which case, this is invalid HTML, as each element must have a unique id, and would result in jQuery only setting the disabled on the first item

It disables them all because $("input").attr("disabled",true); adds the attribute disabled to all input elements. Without seeing your HTML it's hard to tell what the reason is for it not disabling when you try using #myId
Here are some mistakes I've made in the past for similar problems:
1) I did not actually have the id on the element that I thought I had. Whether it was a misspelling, or capitalization difference, or underscore vs dash...the point is the id I was trying to reference on the page simply did not match the one I was looking for with jQuery
2) I referenced it as an id but really it was a class or vice versa. . for classes, and # for id's is second nature, but sometimes if you're tired or exhausted you can very easily make that mistake
3) I had given an id that existed in multiple elements. id is supposed to be unique by convention. Duplicate id's will produce unexpected behavior
Hopefully one of these simple reasons is the cause for your issue and you can quickly resolve it. Maybe take a 30 minute break and come back to it.

Detach then Append Div

I have been working with this script and its mind boggling as it looks as though it should work correctly, however it is not. So I turn to you all for an extra set of eyes on what I am missing.
Situation: Basically, what I am trying to do is on click detach a div, then when another radio button is selected, append the div back to its position.
I have included a JSFiddle so you can see that I may not be entirely off track : http://jsfiddle.net/heykate/pusk6ezx/
On load, the user is presented with two options, Support or Inflatable with the default size selected on the support size with the other models sizes hidden. Which is fine. I know ultimately I want to change that first line of code from hide() to detach().
Once I go to click on the second style option, it shows the second models widths like it is supposed to, however if I was to switch back to the first style option. The div I originally detached, is still hidden and will not .append() within my code.
Here is what my script looks like:
$(document).ready(function(){
$('#5e8a1520d82ed2834919fda63f4a3f84').hide();
$('input[type="radio"]').change(function(){
if($(this).attr("value")=="489"){
$( "#b6304c97422f08727702021e2c6c7cda" ).append( ".rightCol" );
$("#5e8a1520d82ed2834919fda63f4a3f84").detach();
}
if($(this).attr("value")=="488"){
$("#b6304c97422f08727702021e2c6c7cda").detach();
$("#5e8a1520d82ed2834919fda63f4a3f84").show();
}
});
});
Please let me know what I am missing. Basically the reason I am doing this to begin with is
To make it less confusing on the front end and
because the defaults are set (for both sizes) they get mashed up in the product order info, so if I could clear the other widths checked radio button or detach and prevent it from being seen, I think it would work out just fine.

.detach REMOVES the element from the DOM. Since it's no longer in the DOM, when you try to .show() it later, it's no longer in the dom, and therefore not findable/usable. That's why .detach() returns the node you've removed, in case you want to re-use it:
foo = $('#blahblah').detach(); // 'foo' now contains the detached now
$('#otherplace').attach(foo); // reinsert the foo element we detached.
//OR
$('#otherplace').append(foo);

How to use common js function for two divs containig elements of identical ids?

I have common jQuery function and two div tags. Both div tags have different names but both containing elements of identical ids now i want to use this common Jquery function for them both?
I have implemented common function but it's not working for both.
Here's link to my jsfiddle -jsfiddle.net/xS7zF/1/
In my jsfiddle there are two div tags namely example1 and example2 and both tags have elements of identical ids. Function is working fine for first div but not for second.
please help me to sort out this.

Yeah, under the hood, jQuery selection on an ID will use the Document.GetElementById() function implemented by the browser, which is really fast, but (i guess depending on the browser) will stop after it finds the first element, since ID's should be unique and no further searching is needed after the first one is found.
For instance, rename the divs with id="eb" to class="eb" and you can still target specific elements using $("#example1 .eb") and $("#example2 .eb")
UPDATE:
Using your new Fiddle I created this: http://jsfiddle.net/xS7zF/5/
I cleaned up a lot of code and hopefully you can see what I have done. I changed all elements that appear twice from id to class. Now, when you attach an event to an element using $(".classname").click(), it attaches to all the elements. In the handler function where you set HTML and do your show()/hide(), you don't target a specific element using it's ID, but you find it relative to the element that does the event. You can do this using parent(), parentsUntil(), next(), find(), etc. Check jQuery docs for all possibilities. So for instance, the change-handler attaches to all inputs with name=Assets. But instead of doing $("#b1").show(), I go to the parent of the specific input that fires using $(this).parent(). Then I find the element with a class=".b1", which it will only find the one that is next to this specific input and I set the HTML to just that element.
Since there is another input, the same actions happen when THAT input changes, but instead it finds IT's parent, and finds the element with class=".b1" that is next to IT. So both divs with input are contained since they act on elements relative to itself and not across the document.
For extra fun and to show you how flexible this way of programming is, here is a fiddle with the Javascript-code unchanged, but with the exact same question-div copied 8 times. No matter how many times you repeat this, the same code will act on as many divs as you create since everything works relative. http://jsfiddle.net/xS7zF/7/
Hopefully this helps, the rest is up to you!

ID's must be unique, you should not repeat them. You could replace id with class and in the jQuery function do (".ub").each() or manually referencing the object using eq(x). e.g. (".ub").eq(1).

You shouldn't assign same id's to different elements.
You CAN but you SHOULDN'T. Instead of giving the same id, use class

IDs must be unique, try fix this, change to classes.
You can try something like this:
$("div div:first-child")
instead of
$("#eb")
But depends of the rest of your page code. So, change to classes first and use
$(".eb")

when jQuery / javascript find the first ID it would ignore the rest, please read more about it
http://www.w3schools.com/tags/att_global_id.asp

Jquery: Action for each change

Continuing on from: https://stackoverflow.com/questions/16649933/jquery-on-form-change-with-bootstrap-sliders/16650319?noredirect=1
I am currently using the below to capture the ID of a slider and change the content of #log. The problem with this is that is only capture the first slider. I need this to be actioned when any slider is changed.
I've tried using the ID of price on all my sliders, however this doesn't work.
$('#price').each(function(index,value){
$(this).bind('slide', function(){
$("#log").prepend('<p>Changed</p>')
});
});

The reason this doesn't work is because JavaScript conforms with the HTML specification, and the HTML specification states that ID attributes must be unique.
You aren't allowed to have two elements with id="price". Because of this JavaScript will stop searching after it has found the first match. Your .each() loop will only go around once, regardless of how many #price elements are present after the first.
To resolve this, use classes instead. For example:
<div class="price">...</div>
<div class="price">...</div>
<div class="price">...</div>
$('.price').each(function(index,value) { ... });
You will also need to change your #log elements to use classes, too.

$('#price') is id, page include one duplicate id. you need use class

How to set jQuery mouseleave function for multiple divs with same id

I have a site that has multiple divs with the same id name. I want to set a mouseleave function for all of the divs that have this id. In my $(document).ready function I have this code...
$('#my_post_container').mouseleave(function(e)
{
hideSnippet();
});
My hideSnippet() function is correct, but doing this only set the mouseleave function for the first time that a div comes up of id my_post_container. Is there a way to set the mouseleave function to all divs with this id?

I have a site that has multiple divs with the same id name.
Then you need to fix that. You must not have more than one element with the same id. id values must be unique on the page.
You probably want to use class instead, at which point your code is basically fine:
$('.my_post_container').mouseleave(function(e)
{
hideSnippet();
});
...although it coudl be shortened a bit if hideSnippet doesn't care what arguments it gets, doesn't care about this, and doesn't return false:
$('.my_post_container').mouseleave(hideSnippet);

It is invalid HTML to have multiple objects with the same id. As such, you cannot use normal selectors to find them all and you should fix your HTML to not do that.
The #1 suggestion is to fix the HTML so it does not have multiple objects with the same ID. Use a class name and you can then select them all with getElementsByClassName() or querySelectorAll() or with jQuery selectors as in:
$('.my_post_container')
If you insist on having multiple objects with the same id (a bad choice), then you will have to somewhat manually iterate over all possible objects that could have that id.
$("div[id='my_post_container']");
But, this is pretty darn inefficient because the browser can't use any of the built-in selector engine logic and it could break in the future if jQuery decides to optimize this. You really ought to switch to using class names.

You can not have multiple elements on the same page with the same id. Use a class instead, as shown here:
HTML:
<div class="my_post_container">...</div>
<div class="my_post_container">...</div>
<div class="my_post_container">...</div>
jQuery:
$('.my_post_container').mouseleave(function(e)
{
hideSnippet();
});

First of all there should not be any div elements with same ID name.. first we should solve that by keeping class name same.
then on mouse leave and enter part..
$(".testClass").on({
mouseenter : function() {
$(this).css({"background-color" : "blue"});
},
mouseleave : function() {
$(this).css({"background-color" : "green"});
}
});
this should work.. will add a js sample http://jsfiddle.net/meVc6/
and the same thing can be achived using css too..
just add css .testClass:hover { background-color:blue}