Question

我通过添加禁用来禁用输入类型复选框。

<input type="checkbox" id="1_2" value="45" aria-checked="false" focusable="true" tabindex="-1" class=" seatNumber " name="code[]" placeholder="2" disabled >

如何禁用没有输入类型的复选框？

<div id="1_2" role="checkbox" value="45" aria-checked="false" focusable="true" tabindex="-1" class=" seatNumber " name="code[]"  disable>2</div>

Answer 1

禁用属性不适用于div

第一个解决方案

您必须通过css Pointer-events执行此操作并将其selection设为无。

检查以下代码段

.disabled{
 pointer-events: none;
 opacity: 0.4;
   -webkit-touch-callout: none; 
  -webkit-user-select: none;   
  -khtml-user-select: none;    
  -moz-user-select: none;      
  -ms-user-select: none;     
  user-select: none; 
}

<div id="1_2" role="checkbox" value="45" aria-checked="false" focusable="true" tabindex="-1" class="seatNumber disabled" name="code[]" readonly="true">Disabled div</div>

第二个解决方案

您还可以通过使用pseudo元素使其看起来像已禁用来实现此目的。使用以下css。

第二个代码段

.disabled{
   position:relative;
   display:inline-block;
}
.disabled:before{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: #000;
   content: '';
   opacity: 0.001;
}

<div id="1_2" role="checkbox" value="45" aria-checked="false" focusable="true" tabindex="-1" class="seatNumber disabled" name="code[]" readonly="true">Disabled div</div>

Answer 2

好吧，那个div不是真正的复选框，所以它不支持disable属性。你必须自己实现它：

在您的JS中：删除或禁用该复选框的任何事件处理程序，并为其添加is-disabled类。
在您的CSS中：is-disabled使其看起来的样式

Answer 3

您可以使用before伪元素

伪造禁用的div

HTML

<div class="disabled">Some text</div>

CSS

＆＃13;

div{
  display: inline-block;
  width: 300px;
  height:300px;
  text-align:center;
  box-sizing: border-box;
  border: 1px solid;
  position: relative;
  background: lightblue;
}

.disabled:before{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ccc;
  content: '';
  opacity: 0.5;
}

＆＃13;

<div class="disabled">Some text</div>

＆＃13;

如何在没有输入类型的情况下禁用ckeckbox？

3 个答案: