禁用禁用复选框标签的光标:pointer

Question

我正在尝试在复选框及其标签上使用cursor:pointer。

以下是我使用的代码 - 但我想避免在被disabled的复选框及其标签上使用cursor:pointer。

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);

看起来我找不到一种方法来选择包含禁用复选框的标签。

有什么想法吗？

谢谢。

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

- user6269864

---

你能展示一个 Fiddle 吗？ - Jishnu V S

你在哪里将其设置为禁用？你能再解释一下吗？ - ADH - THE TECHIE GUY

你不能仅仅使用CSS来实现这个。你需要一个父选择器，但目前还不存在这样的选择器。唯一纯CSS的方法是使用分离的标签和输入元素，并改变它们的顺序，像这样，但你应该自问是否值得这么麻烦。 - Nico O

@TheodoreK. 在启用时不起作用。 - user6269864

你的HTML建议使用label > input的CSS，但你却使用了label + input... - txtechhelp

Answer 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>

- Jishnu V S

---

我无法看出这个答案与问题有任何关系。 - Nico O

不，我没有看到任何理由这样做。你只是发布了一个切换禁用属性的Javascript片段，而问题是：选择所有包含禁用输入的标签。如果有JS答案，它会看起来像这样：https://jsfiddle.net/4vmra2ja/。但如果Op没关系的话，我也无所谓。 - Nico O

nop 切换仅用于显示禁用光标的工作状态。 - Jishnu V S

如果您将CSS复制并粘贴到文件中，则禁用复选框的光标将显示默认值。 - Jishnu V S

@Jishnu V S，是我还是你刚刚抄袭了我的答案？ - Theodore K.

Answer 2

你不能使用CSS选择器选取父级标签。不过，如果你把标签放在标签后面，你就可以像这样使用 相邻兄弟选择器 +：

$("#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>

- Theodore K.