javascript - Enable checkboxes when a <select> option is selected -

i'm creating "request quote" page. i'm quite new this, , want create condition, when selecting options select area:

when select service, div removes class ".disabled" , checkboxes remove attribute "disabled" (unclickable)

what want following, after selecting option "mobile application", happen:

1. class disabled removed from

   <div id="appoptions" class="disabled"></div> 

2. attribute disabled removed, checkboxes:

   <input type="checkbox "class="servico" disabled> 

3. in end, both must like:

   <div id="appoptions"></div> <input type="checkbox "class="servico"> 

fiddle: https://jsfiddle.net/ujgx4st3/3/

any appreciated.

html

<select>     <option selected="selected" id="service">choose 1 of options</option>     <optgroup label=""></optgroup>      <optgroup label="full webpage">         <option value="webpage">create new, custom website</option>         <option value="reweb">modernize our current website</option>         <option value="trasnf">i don't know i'm looking for</option>     </optgroup>      <optgroup label=""></optgroup>      <optgroup label="design services">         <option value="logo">logo design</option>         <option value="branding">branding</option>         <option value="webdesign">webpages design</option>         <option value="mobile">social design <label class="hidden-xs">(youtube, facebook, twitter, etc)</label></option>         <option value="uxui">mobile ux/ui</option>     </optgroup>      <optgroup label=""></optgroup>      <optgroup label="web development">         <option value="manage">website management</option>         <option value="manage">update responsive</option>         <option value="coding">page coding</option>         <option value="software">software programming</option>         <option value="mobile">mobile application</option>     </optgroup>      <optgroup label=""></optgroup>      <optgroup label="seo & social media">         <option value="smarket">social marketing <label class="hidden-xs">(facebook, twitter, youtube, etc)</label></option>         <option value="seo">search engine optimization</option>     </optgroup>      <optgroup label=""></optgroup>      <optgroup label="website cms">         <option value="wordpress">wordpress</option>         <option value="joomla">joomla</option>         <option value="drupal">drupal</option>         <option value="magento">magento</option>     </optgroup>  </select>   <div id="appoptions1" class="col-md-3 disabled">      <div style="margin: 25px 0;">         <label><b>application options</b> <small>(mobile)</small></label></br></br>          <input type="checkbox" name="platform" value="android" disabled class="servico">android</br>         <input type="checkbox" name="platform" value="apple" disabled class="servico">apple</br>         <input type="checkbox" name="platform" value="windows" disabled class="servico">windows phone</br>         <input type="checkbox" name="platform" value="webapp" disabled class="servico">web application</br>     </div> </div> 

jquery

function enable_cb() {   var state = $('.check').attr('disabled');      if ( $('select option:selected').attr() == 'mobile' ) {         $('#addoptions').removeclass('disabled');     } else {         return false;     } }; 

i suspect you're getting error on javascript console, try following:

function enable_cb(element) {   var state = $(element).attr('disabled');   $(element).prop('disabled', !state); } 

if you're using jquery 1.6+, avoid using prop( ) since has been deprecated in favor of attr( );