使用像“overflow-wrap”或“word-break”這樣的CSS屬性：/* word-break solution */ -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word;/* Use word break with hyphens property */-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;或使用“溢出換行”：overflow-wrap: break-word;如果這些屬性不起作用，請(qǐng)嘗試一起使用它們，或使用主要版本的瀏覽器（我的意思是，絕對(duì)不是 IE 11 ??）
3 回答
蝴蝶刀刀
TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超8個(gè)贊
您可以使用querySelectorAll查找不是關(guān)鍵復(fù)選框 ( none) 的復(fù)選框集合，并根據(jù)關(guān)鍵復(fù)選框的狀態(tài)對(duì)每個(gè)復(fù)選框禁用/啟用它，如下所示：
document.addEventListener('DOMContentLoaded',e=>{
document.querySelector('input[type="checkbox"][name="none"]').addEventListener('click',function(e){//find all checkboxes that are NOT the key checkbox
let col=document.querySelectorAll('input[ type="checkbox" ]:not( [ name="none" ] )');
col.forEach(chk=>{//iterate through collection
chk.disabled=this.checked;//disable current checkbox if key is checked and enable if not checked
if( this.checked )chk.checked=false;//if key checkbox is checked, all others cannot be checked
});
});
});
<table>
<tr>
<td width="100px">1. Cough</td>
<td width="80px"><input type="hidden" name="cough" value="no"><input type="checkbox" class="form-control" name="cough" value="yes"></td>
</tr>
<tr>
<td width="100px">2. Sore Throat</td>
<td width="80px"><input type="hidden" name="sore_throat" value="no"><input type="checkbox" class="form-control" name="sore_throat" value="yes"></td>
</tr>
<tr>
<td width="100px">3. Fever</td>
<td width="80px"><input type="hidden" name="fever" value="no"><input type="checkbox" class="form-control" name="fever" value="yes"></td>
</tr>
<tr>
<td width="100px">4. Flu</td>
<td width="80px"><input type="hidden" name="flu" value="no"><input type="checkbox" class="form-control" name="flu" value="yes"></td>
<tr>
<td width="230px">5. None of above</td>
<td width="80px"><input type="hidden" name="none" value="no"><input type="checkbox" class="form-control" name="none" value="yes"></td>
</tr>
</table>
人到中年有點(diǎn)甜
TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊
超文本標(biāo)記語(yǔ)言
<table id="sickness">
JS
var checkboxes = document.getElementById("sickness").getElementsByTagName("input");
var names = ["cough", "sore_throat", "fever","flu"];
checkboxes.namedItem("none").addEventListener("change", function(e){
if(this.checked == true){
for(var i=0;i<names.length;i++){
checkboxes.namedItem(names[i]).disabled = true;
}
}else{
for(var i=0;i<names.length;i++){
checkboxes.namedItem(names[i]).disabled = false;
}
}
});
慕村9548890
TA貢獻(xiàn)1884條經(jīng)驗(yàn) 獲得超4個(gè)贊
純CSS解決方案：
將 id= 添加到控制復(fù)選框
將 class=dohidepottially 添加到受控表行
添加CSS樣式：
#none:checked + table .dohidepotentially {display: none}
唯一的缺點(diǎn)是控制復(fù)選框必須放在表格之前（對(duì)于 css 相鄰選擇器）。但它可以被隱藏。
縮短的示例：
<form>
<input type="checkbox" class="form-control" name="none" value="yes" id="none">
<table>
<tr class="dohidepotentially">
<td width="100px">2. Sore Throat</td><td width="80px"><input type="hidden" name="sakit_tekak" value="no"><input type="checkbox" class="form-control" name="sore_throat" value="yes"></td>
</tr>
<tr>
<td width="100px">3. Fever</td><td width="80px"><input type="hidden" name="fever" value="no"><input type="checkbox" class="form-control" name="fever" value="yes"></td>
</tr>
<tr>
<td width="230px">5. None of above</td><td width="80px"><input type="hidden" name="none" value="tiada"><label for="none">[click here]</label></td>
</tr>
</table>
</form>
- 3 回答
- 0 關(guān)注
- 212 瀏覽
添加回答
舉報(bào)
0/150
提交
取消