页面滤镜阴影效果

disAble的效果如下：

enAbled效果如下：

 

html代码如下：

 

 

<div class="main_step2_mian">

    <div class="main_step2_mian_top">

        <ul class="borderbottom_double">

            <li style="margin-bottom:20px;">

                <input type="radio"  name="pluginEnable" value="1" <c:if test="${sub.enabled == 1}">checked="checked"</c:if> class="main_step_radio"/>

                <span class="main_step_radio_span"><fmt:message key="plugin.enabled"/></span>

                <input type="radio"  name="pluginEnable" value="0" <c:if test="${sub.enabled == 0}">checked="checked"</c:if> class="main_step_radio"/>

                <span class="main_step_radio_span"><fmt:message key="plugin.disabled"/></span>

 

            </li>

        </ul>

 

    </div>                        

</div>

 

<div class="alpha" id="pluginRegion">

                <div class="main_step2_mian">

                    <div class="main_step2_mian_top">

 

                    <table cellpadding="0" cellspacing="0" width="100%" style="margin:15px auto; padding-left:15px; font-size:14px;border-bottom:1px #ccc solid;">

                <tr >

                    <td width="20%" valign="top"  height="40px" style="padding-top:5px;"><fmt:message key="app.page.title"/></td>

                       <td valign="top">

                        <input id="pageTitle" name="pageTitle" value="${sub.title}"   class="_text_size  _text_textara_com"  maxlength="10"/>

                       </td>

                   </tr>

                   <tr >

                    <td width="20%" valign="top"  height="40px" style="padding-top:5px;"><fmt:message key="app.icon.name"/></td>

                       <td valign="top">

                        <input id="pageLabel" name="pageLabel" value="${sub.label}"   class="_text_size _text_textara_com"  maxlength="10"/>

                       </td>

                   </tr>

               </table>

 

                    </div>                        

                </div>

 

            </div>

 

 

js代码如下：

 

$("input:radio[name='pluginEnable']").change(function(){ 

            var radioValue = $("input:radio[name=pluginEnable][checked]").val();

 

            if(radioValue == 0) {

$(".alpha").css({"opacity":"0.4","filter":"alpha(opacity=40)"});

$("#pluginRegion").find("input").attr("disabled",true);

$("#pluginRegion").find("textarea").attr("disabled",true);

 

} else {

$(".alpha").css({"opacity":"1","filter":"alpha(opacity=100)"});

$("#pluginRegion").find("input").attr("disabled",false);

$("#pluginRegion").find("textarea").attr("disabled",false);

 

}

 

            $.ajax({

url : "${ctx}/app/sub/updateSubEnalbe",

data : {

 

'subId':'${sub.id}',

'status':radioValue

},

async : false,

success : function(data) {

//do some controller

}

});

  

   });