添加不透明度的类

Question

我有一个div加载以下类。

我正在使用以下jquery删除并读取基于复选框的类。

问题是当页面加载时div的不透明度是正确的，但是当我检查然后取消选中（删除并再次添加）时，会添加类并且指针事件有效但不是不透明度。这与这个div中有一个表单元素的事实有关吗？我有另一个div只有文本元素，它工作正常。

这是非工作div的html。

＆＃13;

＆＃13;

    $("#add_back").on("click",function(){
    	if( $(this).is(':checked') ){
    		console.log("checked");
    		$(".back_lock").removeClass("disabledElememt");
    	}else{
    		console.log("unchecked");
    		$(".back_lock").addClass("disabledElememt");
    	}
    });

＆＃13;

    .disabledElememt {
        pointer-events: none;
        opacity: 0.4;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="back-panel-body" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="back-panel-heading" aria-expanded="true">
     <div class="panel-body">
        <label>
          <input id="add_back" type="checkbox">Unlock for <span id="back_price">4.99</span>
         </label>
         <div class="back_lock disabledElememt">
           <div class="form-group">
             <label for="back_txt_0">Text Line 1</label>
    		 <input type="text" id="back_txt_input_0" class="form-control text_element_input" placeholder="Text Line 1" value="Text Line 1">	
    	  </div>                                                                              
        </div>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;