lundi 20 juillet 2015

Enable checkboxes when a

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