How to use string argument of a function in a jQuery expression

Question

I have some set of links and select boxes. My html code is below:

<div>
 <div>
 <a href='#' onclick='set_checked(false,"checkbox1")'>clear</a>
 <a href='#' onclick='set_checked(true,"checkbox1")'>select</a>
 </div>
 <div>
 <input type='checkbox' name='checkbox1'/>
 </div>
</div>
<div>
 <div>
 <a href='#' onclick='set_checked(false,"checkbox2")'>clear</a>
 <a href='#' onclick='set_checked(true,"checkbox2")'>select</a>
 </div>
 <div>
 <input type='checkbox' name='checkbox2'/>
 </div>
</div>

Now my requirement is when I click on select link I have to check the checkbox based on it's arguments, and reversal for clear. Here I'm passing two parameters. One is to pass Boolean value (i.e. if true check else uncheck) and another one is to pass name argument of a checkbox field.
And I'm using the following function to check or uncheck a checkbox:

function set_checked(checked,inputFeildName){
 $('input[name=inputFeildName]').attr('checked',checked);
} 

but the above code is not working. And this is my fiddle http://jsfiddle.net/vu6fs/5/.

I have one more requirement, before selecting any checkbox all clear links have to be disabled, after selection of checkbox respective clear link have to be enable. I'm applying opacity and also 'disabled' property in JavaScript but it's not working,can anyone suggest me where my fault is..

Can anyone please help me?

• Valli69: thank you for all your replies
• Bergi: Please note that the value attribute only represents the defaultValue of the checkbox, to change the actual state use the checked property (with jQuery, use val()).
• Valli69: I have one more requirement, before selecting any checkbox all clear links have to be disabled, after selection of checkbox respective clear link have to be enable. I'm applying opacity and also 'disabled' property in javascript but it's not working,can anyone suggest me where my fault is...
• Valli69: @PranayRana I'm doing the same thing
• Pranay Rana: okies.................................

Answer 1

jQuery 1.6+

function set_checked(checked,inputFeildName){
 $('input[name="'+ inputFeildName +'"]').prop('checked',true);
} 

jQuery 1.5 and below

function set_checked(checked,inputFeildName){
 $('input[name="'+ inputFeildName +'"]').attr('checked','checked');
} 

Here is an example for your extension of question (more you want, About disable/enable a tag on checkbox change)

CSS

.disButton {
 background: transparent;
 border: none;
}
.disButton a {
 text-decoration: none;
 color: #ddd;
}

jQuery

$('input:checkbox').on('change', function() {
 enable_clear(this, this.checked);
}).change();
function enable_clear(el, checked) {
 var target = $(el).parent('div').prev('div').find('a:contains(clear)');
 if (checked) {
 target.unwrap();
 } else {
 target.wrap($('<button/>', {
 disabled: true,
 'class': 'disButton',
 width: target.width() + 'px'
 }));
 }
}
$('a').on('click', function(e) {
 e.preventDefault();
 var target = $(this).parent().next('div').find('input:checkbox');
 if (!target.is(':checked') && $(this).text() == 'select') target.click();
 if ($(this).text() == 'clear') target.click();
});

DEMO

• zerkms: You missed quotes for a checked string for pre-1.5 version
• Valli69: @thecodeparadox thanks for trying, but in your example when I click on select link, the checkbox is not checked
• Valli69: @thecodeparadox now it is fine when I click on select, but it doesn't uncheck when I click on clear and again it has to be disabled. plz check it once
• Valli69: @thecodeparadox thank you for your reply. It's working great as what I want

Answer 2

I think this is what you are trying to do... btw you have misspelt field so be careful when using the variable/attr again.

function set_checked(checked,inputFeildName){
 $('input[name="'+inputFeildName+'"]').attr('checked',checked);
} 

Answer 3

you forget to append string that i did as below , this will resolve your issue

function set_checked(checked,inputFeildName)
{
 $('input[name="'+ inputFeildName+'"]').attr('checked',checked);
} 

Answer 4

There are some errors in your fiddle:

• Your function set_checked is declared in the onLoad-Handler (as selected), and is only available in that locally and not in the global scope. Remove the wrapping function by selecting "no wrap (head)" or assign your function to window.set_checked.
• Please note that the checked attribute only represents the default value of the checkbox, to change the actual state you need to use the checked property (with jQuery, you can use val()).
• If you wanted to change the default value, you can't do it by setting the attribute to (the string) false. The attribute represents a checked checbox through its existence, you would need to use removeAttribute() for disabling. It's easier to use the defaultChecked property with a boolean value.
• last but not least there's the obvious error detected by all others: To use a variable, you will need to use it instead of putting its name into a string (like in PHP).

You also might be more happy with ids than name attributes. I've updated your fiddle with a proper solution: http://jsfiddle.net/vu6fs/7/

To disable the clear/select link when it's not appropriate:

• you can't disable a link (anchor) as you can a form element (see Disable link using javascript, jQuery disable a link, Disable link using css). OK, we don't really need to disable its functionality (nothing changes), so so I guess you only think of graying it out.
  This can be done with CSS, and you'll need to trigger the update both on user-change events and the setting through set_checked. Example code at http://jsfiddle.net/vu6fs/9/
• It might be easier to use just one link that toggles the checked state. Its lettering may change between "clear" and "select", depending on the current state.

I now have written a plugin (i.e. a jQuery prototype function) to add those links dynamically to any checkbox elements. That means it also can use (scoped) click handlers instead of a global-scope-polluting set_checked function.

• Valli69: ok it's working fine,thank you for your reply and can you tell me how to get my one more requirement
• Valli69: can you please give me the dynamic solution (I mean, it should be applicable for any div id's)
• Bergi: I think you should be able to extract a "solution" from the codes we gave you. But I was bored, see jsfiddle.net/mL4Z3 :-)

Answer 5

The function has a little error:

function set_checked(checked,inputFeildName){ 
 $(**'input[name='+inputFeildName+']'**).attr('checked',checked);
}