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?

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

Answer 2

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 3

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 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.

Answer 5

The function has a little error:

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