jvance.com

.net, c#, asp.net, linq, htpc, woodworking

Jarrett's Tech Blog - For July 2009

  1. Get Value of Checkbox using jQuery to Enable Button

    Reading the value of a checkbox in jQuery is not obvious.  You must use a special selector :checked and then check if the value is undefined.

    //checked
    var checked = $('input[type=checkbox]:checked').val() != undefined;
    
    //unchecked
    var unchecked = $('input[type=checkbox]:checked').val() == undefined;
    

    The typical use case for this code is when you want the user to check the "I agree to the terms and conditions" before they can continue. For example:

    $(function() {
      $('#agree').click(function() {
        var satisfied = $('#agree:checked').val();
        if (satisfied != undefined) $('#continue').removeAttr('disabled');
        else $('#continue').attr('disabled', 'disabled');
      });
    });
    

    The above code finds the checkbox and binds to the click event.  When the user checks or un-checks the checkbox, it finds the continue button and enables or disables it based on the value of the checkbox.

    Update - A more elegant way

    //checked
    var checked = $('input[type=checkbox]').is(':checked');
    

    Change Textbox Readonly Value via Checkbox using jQuery

    Another case you may want to enable or disable a textbox based on the value of the checkbox.

    $(function() {
      $('#isOther').click(function() {
        var other = $('#isOther:checked').val();
        if (other != undefined) $('#other').removeAttr('readonly');
        else $('#other').attr('readonly', 'readonly');
      });
    });
    

    The above code changes the readonly property on the textbox when the checkbox is changed by the user.

    Posted by JarrettV on July 14 at 3:58 PM

© Copyright 2017 Powered by AtomSite 1.3.0.0