当选择<select>选项时启用复选框

Question

我正在创建“请求报价”页面。我是很新的这一点，我想创造条件，从选择区域选择选项时：

当您选择一个服务，div删除类“.disabled”和复选框去掉属性“禁用”（不可点击）

我想要做的是以下，选择该选项后，‘移动应用’，会出现这种情况：

1. 类disabled从

   删除

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

2. 属性disabled也被去除，从复选框：

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

3. 最后，两者都必须是这样的：

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

FIDDLE：https://jsfiddle.net/ujgx4st3/3/

任何帮助表示赞赏。

HTML

<select> 
    <option selected="selected" id="service">Choose one of the options</option> 
    <optgroup label=""></optgroup> 

    <optgroup label="Full webpage"> 
     <option value="webpage">Create a new, custom website</option> 
     <option value="reweb">Modernize our current website</option> 
     <option value="trasnf">I don't know what 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 to 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 with 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; 
    } 
}; 

Answer 1

我怀疑你是你的Javascript控制台上得到一个错误，请尝试以下操作：

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

如果您'使用jQuery 1.6+，a void使用prop（），因为它已被弃用attr（）;