CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
user2953989
user2953989

Reputation: 2999

Bootstrap dropdown menu - only checkbox selects not text

I have a bootstrap dropdown menu. When you click on it it highlights certain buildings in my webgl map, depending on their given category (e.g. museum or cinema).

At the moment clicking on the checkbox works. But also clicking on the text next to it highlights the building. This is fine but if you click on the text it doesn't check the checkbox, so the buildings are highlighted but the checkbox isn't ticked. This makes it confusing for users.

I've tried giving the text no pointer events but this doesn't seem to be working.

Website: explorecanterbury.co.uk (dropdown is first icon on the nav)

<nav class="navbar navbar-default" style="z-index:5;">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

       <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg>
</li>
            <ul class="dropdown-menu">
                <li><a id="alltoggle" class="small toggle" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Show All</a></li>
                <li><a id="mgtoggle" class="small toggle" data-value="option3" tabIndex="-1"><input class="uncheck" type="checkbox"/>&nbsp;Museums and Galleries</a></li>
                <li><a id="landmarktoggle" class="small toggle" data-value="option4" tabIndex="-1"><input class="uncheck" type="checkbox"/>&nbsp;Landmarks</a></li>
                <li><a id="shoppingtoggle" class="small toggle" data-value="option5" tabIndex="-1"><input class="uncheck" type="checkbox"/>&nbsp;Shopping</a></li>
                <li><a id="hotelstoggle" class="small toggle" data-value="option6" tabIndex="-1"><input class="uncheck" type="checkbox"/>&nbsp;Hotels + Bed &amp; Breakfast</a></li>
                <li><a id="churchestoggle" class="small toggle uncheck" data-value="option7" tabIndex="-1"><input class="uncheck" type="checkbox"/>&nbsp;Churches</a></li>
                <li><a id="cinematoggle" class="small toggle uncheck" data-value="option8" tabIndex="-1"><input class="uncheck" type="checkbox"/>&nbsp;Cinemas</a></li>
            </ul>
        <li class="icon_display"><svg></li>
        <li class="icon_display"><svg></li>

      </ul>
      <div class="searchBar">
            <div class="input-group" style="padding-left: 10px;">

  <input type="text" class="form-control ui-autocomplete-input" placeholder="Search" id="srch-term" autocomplete="off">

  <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>

  <svg>

</div>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Upvotes: 0

Views: 332

Answers (1)

Wowsk
Wowsk

Reputation: 3675

You are going to want to use the label element. Surround the text in a label element and give the input element an id. Then set the for, for the label element to the input's id.

Ex.

<a id="alltoggle" class="small toggle" data-value="option2" tabIndex="-1">
   <input type="checkbox" id="show-all"/>
   <label for="show-all">&nbsp;Show All</label>
</a>

Upvotes: 1

Related Questions