Отключение свойства Text элемента управления Checkbox с помощью jQuery

Question

Я могу отключить флажок на основе выпадающего значения без проблем, но текст остается жирным. Есть ли способ добраться до этого и отключить его и «серого»? Этот вопрос не является дубликатом.

<td><asp:CheckBox id="cb1" ClientIDMode="Static" runat="server" Text="Some Text" /></td> 

function ddlChanged() { 
     var enable = !($("#ddlTestsCancelled").val() == 1); 
     EnableCheckBoxes(enable, $("#cb1")); 
    } 

function EnableCheckBoxes(enable, chk) {    
     chk.prop("disabled", enable);   
     chk.prop("checked", false);   
    } 

Answer 1

Что вы можете сделать, это получить элемент метки для флажка, так как ASP.Net показывает Text флажка как элемент метки, а затем изменит его атрибут цвета CSS на серый.

function EnableCheckBoxes(enable, chk) {    
     chk.prop("disabled", enable);   
     chk.prop("checked", false);  
     if(enabled === true) { 
      $("label[for='<%=cb1.ClientID%>']").css("color", "black"); 
     } else { 
     $("label[for='<%=cb1.ClientID%>']").css("color", "gray") 
     }  
    } 

Кроме того, для имитации отключенного эффекта, вы можете установить непрозрачность на что-то вроде .5 вместо того чтобы изменить атрибут цвета, а затем сбросить его на 1, если флажок включен. Код для этого приведен ниже.

function EnableCheckBoxes(enable, chk) {    
     chk.prop("disabled", enable);   
     chk.prop("checked", false);  
     if(enabled === true) { 
      $("label[for='<%=cb1.ClientID%>']").css("opacity", 1); 
     } else { 
     $("label[for='<%=cb1.ClientID%>']").css("opacity", .5) 
     }  
    } 

Если вы хотите использовать chk, а не получение ClientId от флажка, а затем использовать приведенную ниже версию же метода.

function EnableCheckBoxes(enable, chk) {    
     chk.prop("disabled", enable);   
     chk.prop("checked", false);  
     if(enabled === true) { 
      $("label[for='" + chk[0].id + "']").css("opacity", 1); 
     } else { 
     $("label[for='" + chk[0].id + "']").css("opacity", .5) 
     }  
    } 

Answer 2

Если вы хотите, чтобы не-полужирный и серый цвет текста в HTML-элементе, вы можете использовать css() метод JQuery для динамического применения стиля следующим образом:

$("#cb1").css("font-weight", "normal"); 
$("#cb1").css("color", "gray");