6079

jQuery do something when Bootstrap toggle button class is active

Question:

I'm new to <em>JavaScript/jQuery</em> 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?

Answer1:

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

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

Recommend

  • How can I have Brand and Navbar on separate lines?
  • How to render flexdashboard from the command line?
  • Leaflet map not sizing to dimensions of target element
  • Setting a different direction for the input tag and its title attribute
  • Overriding createToolTip() in a custom CellRenderer
  • Winrt - Adjusting flyout according to where it appears
  • Bootstrap tooltip stops working after any other event runs
  • Flyout changes Page's theme
  • How an included partial insert code into parent's block?
  • Adding foreignObjects to D3 force-directed graph nodes breaks events
  • jQuery Tipsy won't work with jQuery.each() and live:true
  • Ransack search string arrays stored in db
  • Xcode duplicated devices bug
  • QTP UFT Unable to find row count from table
  • Jquery Show & ScrollTop (or ScrollTo)
  • CSS: How to fix overlapping divs
  • Android application not restoring state when installed from .apk, works fine from eclipse
  • Change navbar in bootstrap if user login
  • Android Chronometer starts and stops but carries on counting when stopped
  • Python cosine function precision [duplicate]
  • HttpClient: disabling chunked encoding
  • Trying to get the char code of ENTER key
  • npm 5.4.1 install/uninstall all failing
  • Validate child input components on submit with Vee-Validate and vue js 2
  • Google Custom Search with transparent background
  • MongoDB in PHP using aggregate to group by _id is null not working
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • Display issues when we change from one jquery mobile page to another in firefox
  • javaw.exe and eclipse startup problems
  • what is the difference between the asp.net mvc application and asp.net web application
  • To display the title for the current loaction in map in iphone
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Matrix multiplication with MKL
  • trying to dynamically update Highchart column chart but series undefined
  • embed rChart in Markdown
  • Android Google Maps API OnLocationChanged only called once
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app