jquery enable disable link based on checkbox

Question

I need to disable/enable "a.href" links based on checkboxes being checked. I have a list of checkboxes (2 columns). When at least one checkbox in a column "install" is checked, "Install" link should be enabled, otherwise disabled. When at least one checkbox is checked in column "Remove", a link with the same class name should be enabled, otherwise disabled.

I've tried with this but not sure if this is correct, it doesn't work:

function refleshCheckboxes() {
    if ($("input:checked").length > 0) {
        $("input:checked").each(function(index, e) {
            var css = $(e).attr('class').split(' ').slice(-1);
            $("div.markActions a").each(function (index, e) {
                $(e).removeClass("disablelink").hasClass(css);
            });

        });
    }
    else {
        $("div.markActions a").addClass("disablelink");
    }
}

$("div.markActions a") - this is where a.href links are (inside this div)

checkboxes have the same class name as the a.href links. So I would like to get the class name of checkbox and match that class with the class of the a.href link.

Checkbox:

<input type="checkbox" value="2" class="checkbox install">

Link:

<a class="iconDiskPlus install disablelink" href="#">Install</a>

enter image description here

http://stackoverflow.com/questions/1169625/jquery-link-tag-enable-disable to enable/disable link — Abhilash, Nov 06 '12 at 07:48
have you tried getattribute property of jquery. Search for it in google — polin, Nov 06 '12 at 07:49
http://stackoverflow.com/questions/901712/check-checkbox-checked-property-using-jquery to check checkbox checked property. Combine these two and presto! — Abhilash, Nov 06 '12 at 07:49
If you need/want help with JavaScript please post the (relevant/[SSCCE](http://sscce.org)) HTML. Maybe it's just me, but I really am getting tired of having to ask (almost every time, it seems) and being expected to guess what's going on in someone else's website. ***Please***: help *us* to help *you!* — David Thomas, Nov 06 '12 at 08:13

score 1 · Accepted Answer · answered Nov 06 '12 at 08:56

I figured it out:

function refleshCheckboxes() {
    if ($("input.checkbox:checked").length > 0) {
        var arr = new Array(".install", ".uninstalled", ".enabled", ".disabled", ".download", ".remove");
        for (i = 0; i < arr.length; i++) {
            if ($("input.checkbox:checked").is(arr[i])) {
                $(".markActions a" + arr[i]).removeClass("disablelink");
            } else {
                $(".markActions a" + arr[i]).addClass("disablelink");
            }
        };
    }
    else {
        $("div.markActions a").addClass("disablelink");
    }
}

score 0 · Answer 2 · answered Nov 06 '12 at 08:10

Try the below one.

$(function(){

    $('input.install').click(function(){ 

        var install_link =  $('a.install');
        if($('input.install:checked').length !=0){
        install_link.addClass('enablelink').text('install enabled');
        }
        else{
        install_link.addClass('disablelink').text('install disabled');                

        }                     
});         
});

Check out js fiddle for demo

score 0 · Answer 3 · answered Nov 06 '12 at 08:11

You can set an onclick event to a checkbox like this:

<input id="someId" type="checkbox" value="2" class="checkbox install" onclick="myFunction()">

in your js file define a function:

function myFunction(){
    var checkBox = document.getElementById("someId");
    if(checkBox.checked == true){
        //you have to give an id attribute to the object
        // which you want to hide
        var hideIt = document.getElementById("id");
        hideIt.style.visibility = "none";
    }
}

jquery enable disable link based on checkbox

3 Answers3