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