Kontrollkästchen in jQuery deaktivieren
-
Deaktivieren Sie Checkboxen mit der
.attr()-Methode in jQuery -
Deaktivieren Sie Kontrollkästchen mit der
.prop()-Methode in jQuery
Um Checkboxen in jQuery zu deaktivieren, können Sie die jQuery-Methoden .attr() und prop() verwenden. In diesem Artikel erfahren Sie anhand von zwei detaillierten Beispielen, wie das geht.
Deaktivieren Sie Checkboxen mit der .attr()-Methode in jQuery
Um Checkboxen in Ihrem HTML-Formular zu deaktivieren, können Sie die Methode attr() verwenden, um jeder Checkbox ein disabled-Attribut hinzuzufügen. Um sie zu aktivieren, können Sie ein Click-Ereignis an ein anderes Kontrollkästchen anhängen.
Wenn Sie es also aktivieren, werden die verbleibenden Kontrollkästchen aktiviert. Gleichzeitig kehrt es in den Zustand deaktiviert zurück, wenn Sie es deaktivieren.
Der folgende Code zeigt Ihnen, wie es geht, und die Ergebnisse folgen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-disable-checkboxes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
outline: 2px solid #1a1a1a;
width: 50%;
margin: 0 auto;
padding: 0.5em;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
[disabled] {
cursor: not-allowed;
}
label[style^="opacity: 0.4"] {
cursor: not-allowed;
}
label:first-child:hover {
background-color: #aaa;
}
</style>
</head>
<body>
<main>
<form id="inventors-list">
<label>
<input type="checkbox" id="disable-all-checkboxes">Enable all options
</label>
<label>
<input type="checkbox" class="inventor"> Thomas Edison
</label>
<label>
<input type="checkbox" class="inventor"> Albert Einstein
</label>
<label>
<input type="checkbox" class="inventor"> Ernest Rutherford
</label>
</form>
</main>
<script>
$(function() {
enable_all_checkboxes();
$("#disable-all-checkboxes").click(enable_all_checkboxes);
});
function enable_all_checkboxes() {
if (this.checked) {
$("input.inventor").removeAttr("disabled");
$("input.inventor").parent().css('opacity', '')
} else {
$("input.inventor").attr("disabled", true);
$("input.inventor").parent().css('opacity', '0.4')
}
}
</script>
</body>
</html>
Ausgang:
Deaktivieren Sie Kontrollkästchen mit der .prop()-Methode in jQuery
Die Methode prop() ist eine weitere Möglichkeit, Checkboxen mit jQuery zu deaktivieren. Das bedeutet, dass Sie das Attribut disabled nicht verwenden, wie im ersten Beispiel gezeigt.
Im folgenden Code haben wir vier Kontrollkästchen und drei sind standardmäßig deaktiviert. Sie aktivieren die verbleibenden, wenn Sie auf das erste Kontrollkästchen klicken.
Sie kehren in den Zustand deaktiviert zurück, wenn Sie das zweite Mal darauf klicken.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-disable-checkboxes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
form {
outline: 2px solid #1a1a1a;
width: 50%;
margin: 0 auto;
padding: 0.5em;
}
label {
display: block;
cursor: pointer;
font-size: 1.2em;
}
[disabled] {
cursor: not-allowed;
}
label:first-child:hover {
background-color: #aaa;
}
</style>
</head>
<body>
<main>
<form id="algorithm-list">
<label>
<input type="checkbox" id="disable-all-checkboxes">Enable all options
</label>
<label>
<input type="checkbox" class="algo"> Binary search
</label>
<label>
<input type="checkbox" class="algo"> Merge Sort
</label>
<label>
<input type="checkbox" class="algo"> Linked List
</label>
</form>
</main>
<script>
$(function() {
enable_all_checkboxes();
$("#disable-all-checkboxes").click(enable_all_checkboxes);
});
function enable_all_checkboxes() {
$("input.algo").prop("disabled", !this.checked);
}
</script>
</body>
</html>
Ausgang:
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn