jquery mobile checkbox styling issue

Question

Использование jquery mobile.

Постарайтесь отключить флажок. высота/ширина могут быть переопределены.

<div class=" ui-checkbox ui-state-disabled"> 
<input type="checkbox" name="foo" checked="checked" disabled="disabled"> 
</div> 

Почему позиция важна и ее нельзя переопределить. В результате он не может хорошо совмещаться с соседними элементами в разных ситуациях.

.ui-checkbox input:disabled, .ui-radio input:disabled { 
    position: absolute !important; 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
    clip: rect(1px,1px,1px,1px); 
} 

Благодарим за консультацию.

Answer 1

Чтобы использовать стиль jQM, установите флажок в поле LABEL (есть ли у вас текст или нет). Затем, когда виджет будет увеличен, если он отключен, непрозрачность используется для уменьшения галочки.

<label> 
    <input type="checkbox" name="foo" checked="checked" disabled="disabled" /> Check me    
</label>     
<label> 
    <input type="checkbox" name="bar" checked="checked" disabled="disabled" />     
</label>   

jQM на самом деле скрывает элемент INPUT и стильно устанавливает метку.

Если с другой стороны, вы хотите jQM оставить флажок без стилей, добавить данные-роль = «нет»:

<input type="checkbox" name="bar" checked="checked" disabled="disabled" data-role="none" />