js
/** * @author redcrow * create 24/11/2014 * link http://na5cent.blogspot.com/2014/11/primefaces-selectoneradio-change.html */ (function($) { $(function() { $('[class*=change-disabled]').each(function() { var $redioChecked = $(this); var classes = $redioChecked.attr('class').split(' '); for (var i = 0; i < classes.length; i++) { if (/^(change\-disabled)/.test(classes[i])) { done( $redioChecked.find('input[type=radio]'), replace(classes[i], /.*\:(.*?)\(.*/), replace(classes[i], /.*\((.*?)\).*/) ); } } }); function replace(str, regEx){ return str.replace(regEx, function() { return arguments[1]; }); } function disabledChecked(checked, $el) { if (checked) { $el.addClass('disabled-item'); } else { $el.removeClass('disabled-item'); } } function isDisabled($radioValue, disableValue) { var values = disableValue.split(','); for (var i = 0; i < values.length; i++) { if ($.trim($radioValue) === $.trim(values[i])) { return true; } } return false; } function done($oneRadio, disableValue, classes) { var clazz = classes.split(','); for (var i = 0; i < clazz.length; i++) { var $el = $($.trim(clazz[i])); disabledChecked(isDisabled( $oneRadio.filter(':checked').val(), disableValue ), $el ); $oneRadio.on('change', function() { disabledChecked(isDisabled( $(this).val(), disableValue ), $el ); }); } } }); })(jQuery);css
.disabled-item{ position : relative; opacity: .30; filter: alpha(opacity=30); } .disabled-item::after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: all; }
ตัวอย่างการใช้งาน
xhtml
กำหนด style class เป็น change-disabled:true(.clinic-a) : disabled target element (.clinic-a) เมื่อค่าตรงตามที่ตั้งไว้ (true) สามารถใส่เป็น multiple value ได้
<span> <p:selectOneRadio value="#{auditFormCtrl.auditForm.audit.clinicA}" styleClass="change-disabled:true(.clinic-a)"> <f:selectItem itemValue="true" itemLabel="Yes"/> <f:selectItem itemValue="false" itemLabel="No"/> </p:selectOneRadio> </span> <span class="clinic-a"> วันเดือนปีที่ผู้ป่วยเริ่มมีไข้ <p:spacer width="10"/> <p:inputText value="#{auditFormCtrl.auditForm.audit.clinicADate}" styleClass="ic-calendar"> <f:convertDateTime pattern="dd/MM/yyyy"/> </p:inputText> </span>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น