Chosen plugin jquery

Sometime you will need to disable a field and make it enable on the previous field is change and chosen option in it , you can achieve that by doing the following


<select data-placeholder="Type of services" class="chzn-select" style="width:172px" id="os_services">
 <option value=""></option>
 <option value="personal">Personal</option>
 <option value="buisness">Buisness</option>
 </select>
 <img src="img/tip.png" alt="tip" class="tooltip" width="17" height="17" title="<b>Personal:</b> a professional translator translates your personal (non-business) documents.<br/><br/><b>Business:</b> a translation that has been checked by a qualified proofreader to minimize the frequency of error."/>
 <select data-placeholder="Type of document" class="chzn-select" style="width:172px" id="os_type" disabled>
 <option value=""></option>
 <option value="General">General</option>
 <option value="Legal">Legal</option>
 <option value="Technical">Technical</option>
 <option value="Literary">Literary</option>
 <option value="Marketing">Marketing</option>
 <option value="Medical">Medical</option>

 </select>
 </div>

 


// Remove the disable from the type of service when selected value changed
 $('#os_services').chosen().change(function(){
 $("#os_type").attr('disabled', true).trigger("liszt:updated");
 var service = $(this).find("option:selected").text();
 switch(service)
 {
 case 'personal':
 $("#os_type").attr('disabled', true).trigger("liszt:updated");
 break;
 case 'Buisness':
 $("#os_type").attr('disabled', false).trigger("liszt:updated");
 break;

 }
 });

 


// original form in the html not the one div with chosen plugin
// all the trick goes in the trigger function to update the chosen again after certain action happened

$("#original_form_field").attr('disabled', true).trigger("liszt:updated");

for more information please review the following :

https://github.com/harvesthq/chosen/issues/67#issuecomment-2170256

Advertisements
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: