Question

我想在我的复选框及其标签上加cursor:pointer。

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

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

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>

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

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

2 个答案: