I'm creating a "Request a quote" page, im quite new to this, and I want to create a condition, when selection an options from a select area:
When you select a service, a div removes class ".disabled" & the checkboxes remove attribute "disabled" (unclickable)
What I want to do is the following, after selecting the "Mobile Application":
Remove class "disabled" from id="appoptions"
Remove attribute "disabled" from checkboxes (each checkbox has class="servico")
FIDDLE: http://ift.tt/1OsH84x
Any help? Appreciated
HTML
<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();
$("#services").click(enable_cb);
});
function enable_cb() {
$("input.servico").prop("disabled", !this.checked);
}
Aucun commentaire:
Enregistrer un commentaire