當選擇<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（）;