禁用光标：禁用复选框标签的指针答案

【问题标题】：Disable cursor:pointer for labels of disabled checkboxes禁用光标：禁用复选框标签的指针
【发布时间】：2016-12-08 08:48:37
【问题描述】：

我正在尝试在我的复选框及其标签上添加cursor:pointer。

这是我使用的代码 - 但我想避免在复选框及其标签上使用 cursor:pointerdisabled。

HTML 看起来像这样：

<label>
    <input 
        type="checkbox"
        ...more attributes...
        > Yes, please specify:
</label>

CSS：

input[type=checkbox]:not([disabled]), 
label + input[type=checkbox]:not([disabled]) {
    cursor: pointer;
}

我将其设置为禁用的方式是使用 jQuery：

$("selector").prop("disabled", true);
$("selector").prop("disabled", false);

似乎我找不到选择包含禁用复选框的<label> 的方法。

想法？

谢谢。

有人好心提供了一个codepen进行测试：http://codepen.io/8odoros/pen/BQVQGg

【问题讨论】：

你能给我一把小提琴吗
你在哪里设置为禁用？你能解释一下吗
你不能单独使用 css 来做到这一点。您需要一个尚不存在的父选择器。唯一的 css 方法是使用分隔的标签和输入元素并更改它们的顺序，like this，但你应该问问自己这是否值得麻烦。
@TheodoreK。启用后不起作用
你的 HTML 建议你的 CSS 应该是 label > input 但你有 label + input ...

标签： jquery html css checkbox css-selectors

【解决方案1】：

我不知道你到底需要什么，我的理解是否正确你需要这个

$('button').click(function(){
var i = $('input');
    
    if ( i.is('[disabled]') ){
        i.attr('disabled',false)
    }else{
         i.attr('disabled',true);
    }
})

input[type=checkbox][disabled]{
  cursor:default;
}
input[type=checkbox]:not([disabled]) +label {
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input type="checkbox" value="tasd" disabled />
<input type="text" value="text" disabled />
<button>disable/enable</button>

<input  type="checkbox" />
<label> This is enabled (pointer cursor)</label>
</br>
<input  type="checkbox"  disabled/> 
<label>This is disabled (default cursor)</label>

【讨论】：

我刚刚将cursor:none 更改为cursor:default
我看不出这个答案与问题有什么关系。
不，我看不出有任何理由。您只发布了一个切换禁用属性 Javascript sn-p，而问题是：选择所有包含禁用输入的标签。如果这个问题有 JS 答案，它看起来会是 like this。但如果 Op 对此表示满意，我不介意。
nop 切换仅用于显示禁用光标工作，
@Jishnu V S，是我还是你刚刚复制了我的答案？

【解决方案2】：

您不能使用 CSS 选择父级（标签）。但是，如果您将标签放置在输入之后，则可以像这样使用Adjacent sibling selector +：

$("#active").prop("disabled", false);
$("#inactive").prop("disabled", true);

input[type=checkbox]:not([disabled]) {
    cursor: pointer;
}
input[type=checkbox]:not([disabled]) +label {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  type="checkbox" id="active"/>
<label> This is enabled (pointer cursor)</label>
</br>
<input  type="checkbox" id="inactive"/> 
<label>This is disabled (default cursor)</label>

【讨论】：