2016-07-23 18 views
0

Ich deaktiviere Eingabe-Typ-Checkbox durch Hinzufügen einer deaktivierten.Wie checkbox ohne Eingangstyp zu deaktivieren?

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

Wie deaktiviert man ein Kontrollkästchen ohne Eingabe-Typ?

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

Was meinen Sie? .. – nicael

+0

Es wird ein Kontrollkästchen nicht dann, wenn es ein 'nicht Baumuster zur hat das, können Sie es' lesen only' –

+4

Ihre DIV ist kein Kontrollkästchen, es kann nicht deaktiviert werden. Sie haben wahrscheinlich ein Framework, das das DIV in eine Checkbox umwandelt. – adeneo

Antwort

2

Die deaktiviert Eigenschaft wird auf div

erste Lösung nicht funktionieren

Sie es durch Pointer-events CSS zu tun haben, und es selection zu keiner machen.

Überprüfen Sie die folgenden Snippet

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

Zweite Lösung

Sie können dies auch erreichen, indem pseudo Elementen, um es wie deaktiviert aussehen. Verwenden Sie die folgenden css.

Zweite Snippet

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

+0

nur für den Datensatz "Zeiger-Ereignisse" und "Benutzer -select' haben eine Unterstützung von IE 11+ – eltonkamami

+0

@eltonkamami ich weiß, Danke, aber es wird keine andere Lösung zu deaktivieren ein 'div', wenn es mit uns teilen. :) –

+1

nett. Ich sehe, du hast einen anderen Weg gefunden, es zu tun – eltonkamami

0

Nun, das div ist nicht eine reale Option, damit es nicht disable Attribut nicht unterstützt. Sie haben es selbst zu implementieren:

  • In Ihrem JS: löschen oder deaktivieren, was Event-Handler Sie für das Kontrollkästchen und eine is-disabled Klasse hinzufügen.
  • In Ihrem CSS: Stil, dass is-disabledaussehen deaktiviert.
0

Sie können fälschen deaktiviert div mit einem before Pseudoelement

HTML

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

CSS

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; 
 
}
<div class="disabled">Some text</div>