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>


ไม่มีความคิดเห็น:
แสดงความคิดเห็น