jQuery do something when Bootstrap toggle button class is active

Question

I'm new to JavaScript/jQuery so could do with some assistance here. I have the following inputs in a form:

<div class="form-group">
    <button type="button" class="btn btn-default navbar-btn" data-toggle="button tooltip"
    data-placement="right" title="Use your exact location" name="geoloc" id="geoloc">
        <li class="icon-screenshot"></li>
    </button>
</div>
<div class="form-group">
    <input type="text" class="form-control" placeholder="Address" name="address"
    id="address">
    <input name="lat" type="hidden" value="">
    <input name="lng" type="hidden" value="">
</div>

I'm trying to disable the address input text box if the user clicks the geoloc toggle button (which means the form will use their exact location) as the text box becomes redundant.

How do I get the browser to apply the 'disabled' attribute to the address input when the geoloc input class is active, and enable the address input when the geoloc button doesn't have the active class?

Answer 1

A basic approach to toggling your address field's disabled property:

$('#geoloc').click(function (e) {
        var $address = $('#address');
        $address.prop("disabled", !$address.is(':disabled'));
});