หน้าเว็บ

วันจันทร์ที่ 24 พฤศจิกายน พ.ศ. 2557

Primefaces SelectOneRadio change disabled




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>

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

แสดงความคิดเห็น