JQuery - Select by attribute?

Question

This works in Opera but apparently nothing else.

HTML

<input type="checkbox" name="iphone" value="checked" checked="checked"  />
<input type="checkbox" name="photocart" value="checked" checked="checked"  />

JS

$("input[name=iphone]").attr('checked', 'checked');
$("input[name=photocart]").attr('checked', 'checked');
$("input[name=iphone]").attr('disabled', 'disabled');
$("input[name=photocart]").attr('disabled', 'disabled');

I have also tried the following to no avail.

$("input[name|=iphone]").attr('checked', 'checked');
$("input[name|=photocart]").attr('checked', 'checked');
$("input[name|=iphone]").attr('disabled', 'disabled');
$("input[name|=photocart]").attr('disabled', 'disabled');

$("[name=iphone]").attr('checked', 'checked');
$("[name=photocart]").attr('checked', 'checked');
$("[name=iphone]").attr('disabled', 'disabled');
$("[name=photocart]").attr('disabled', 'disabled');

$("[name|=iphone]").attr('checked', 'checked');
$("[name|=photocart]").attr('checked', 'checked');
$("[name|=iphone]").attr('disabled', 'disabled');
$("[name|=photocart]").attr('disabled', 'disabled');

No joy on any of them. Any ideas on how I can get this going?

EDIT :- Epic failed on the copying of the HTML SORRY!

Answer 1

First off, you have two elements named "hosting", but you aren't using "input[name=hosting]".

Your HTML:

<input type="checkbox" name="iphone" value="checked" checked="checked"  />
<input type="checkbox" name="photocart" value="checked" checked="checked"  />

JS (that should work):

$('input[name=iphone]').attr('checked', true);
$('input[name=photocart]').attr('checked', true);
$('input[name=iphone]').attr('disabled', true);
$('input[name=photocart]').attr('disabled', true);

Keep in mind that if you have more than one element with name "iphone" or "photocart" that jQuery will change their attributes as well.

Use true or false instead of 'checked' or 'disabled' for the attribute values. Remember, you're manipulating the DOM, so it's different than having <input type="checkbox" disabled="disabled" />.

Answer 2

//for each one
$("input[name=photocart] :checked").val();
$("input[name=iphone] :checked").val();

//general, used with an event
result = $(this).is(":checked");

//general, used with a css class in common (add a class="checkable" to your target inputs)
$(".checkable:checked").each(function() {
    result += this.value;
}

Answer 3

You can specify it like this:

$('input[name=hosting][checked]')

See the Jquery multiple selector page for more info.

Answer 4

The attribute selector [name=val] matches all elements that have an attribute name that’s value is exactly val. In opposite to that, [name|=val] matches all elements that have an attribute name that’s value either being exactly "val" or beginning with "val" immediately followed by "-". The latter is rather intended to be used with a language codes (e.g. [lang|=en] matches lang="en-US"). So use the former selector for an exact match.

Answer 5

Note that you can also go basic and do these like this:

if ($("input[name=iphone]")[0].checked) // returns true or false depending on the value
if $("input[name=photocart]")[0].checked) 
if ($("input[name=iphone]")[0].disabled) // returns boolean value
if ($("input[name=photocart]")[0].disabled)

$("input[name=iphone]")[0].checked = true;// sets the check to true (checked) 
$("input[name=photocart]")[0].attr('checked', true); 
$("input[name=iphone]")[0].disabled = false;// enables the input control
$("input[name=photocart]")[0].attr('disabled', true); 

Another cool trick, set the value to what it is NOT at present which acts like a toogle:

$("input[name=iphone]")[0].checked = !$("input[name=iphone]")[0].checked;

EDIT: example to set all checked boxes to unchecked:

$("input:checked")[0] = false;// single
$('input:checked').each(function() {
    this.checked = true;
});

NOTE IF you give them a class called "mycheckbox" even simpler:

var toggle_click = false; 
$(function() {  
  $('.mycheckbox').click(function() { 
    $('.mycheckbox').each().checked = !this.checked; 
    toggle_click = !toggle_click; 
  }); 
});

AND IF it is checked, uncheck it:

$('.cptIcdCheckbox:checked').each(function() {
            this.checked = !this.checked;
 });

I use this technique if I have a list of checkboxes and a "header" checkbox to uncheck them all or check them all depending upon the "group header" checkbox value and it's click and/or change event.