使用CSS隐藏复选框

Question

I have the code, which I get it from inspecting:

<td class=ox-list-pair style>
<input type="CHECKBOX" name="ox_CkSurvey_Sport__xava_selected" value="selected:0" onclick="openxava.onSelectElement('CkSurvey','Sport','null','row=0,viewObject=xava_view',this.checked,'ox_CkSurvey_Sport__0',false,'','border-bottom: 1px solid;','',false,false,0,'xava_tab')">
</td>

I have tried to hide the checkbox but none of them success. My attempts:

input[type=checkbox].ox_CkSurvey_Sport__xava_selected {
     display: none;
}

ox_CkSurvey_Sport__xava_selected {
     display: none;
}

.ox_CkSurvey_Sport__xava_selected input[type="checkbox"]{
     display:none;
}

Please note that <td> is valid as it is inside <tr> as well as <table> .

Please help me. Thanks.

Answer 1

You should read up on CSS selectors.

https://www.w3schools.com/cssref/css_selectors.asp

You are trying to hide the check box with the class "ox_CkSurvey_Sport__xava_selected", but that doesn't exist.

You need to do this:

input[type=checkbox][name=ox_CkSurvey_Sport__xava_selected] {
    display: none;
}

Answer 2

Is your <td> valid? What makes a <td> valid is:

1. It must be in a <tr>
2. That <tr> must be in a <table>

Technically <tr> must be in a <tbody> , <thead> , or <tfoot> but the browser will create a <tbody> by default if there's a <table> .

In the demo there's:

• a <table> , <tr> , <td> , and your messy checkbox.

• a <td> and a simple checkbox.

Note: The selector is td.ox-list-pair > input[type="checkbox"] and it successfully hides the messy checkbox and fails to hide the simple checkbox. So as you can see that the browser will ignore an invalid <td> and everything within it. I'm going out on a limb and assume that your <td> is not inside a <tr> and/or <table> .

Demo

 $('td.ox-list-pair > input[type="checkbox"]').css('display', 'none'); 

 b { color: red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td class='ox-list-pair' style> <input type="CHECKBOX" name="ox_CkSurvey_Sport__xava_selected" value="selected:0" onclick="openxava.onSelectElement('CkSurvey','Sport','null','row=0,viewObject=xava_view',this.checked,'ox_CkSurvey_Sport__0',false,'','border-bottom: 1px solid;','',false,false,0,'xava_tab')">I'm in a valid cell </td> </tr> </table> <td class='ox-list-pair'> <input type="CHECKBOX">I'm in an <b>invalid</b> cell </td>