Maison > Article > interface Web > Comment rendre la case à cocher en lecture seule dans jquery
Comment rendre la case à cocher en lecture seule dans jquery
- 青灯夜游original
- 2022-07-25 16:06:392277parcourir
Deux méthodes en lecture seule : 1. Utilisez attr() pour ajouter l'attribut désactivé à la case à cocher, la syntaxe est "$("input[type='checkbox']").attr("disabled",true) ;"; 2. Utilisez click() pour définir l'état de la case à cocher sans changer l'état de la case à cocher lorsque vous cliquez dessus. La syntaxe est "$("input[type='checkbox']").click(function(){return false;} )".
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.0, ordinateur Dell G3.
En matière de lecture seule, il est facile de penser à utiliser l'attribut readonly, mais pour les cases à cocher, cet attribut est différent de l'effet attendu. La raison en est que l'attribut readonly est associé à l'attribut value de l'élément de page (tel que la zone de texte, le contenu du texte de la zone de saisie ne peut pas être modifié lorsque la lecture seule est définie), et cocher/décocher la case ne modifie pas son attribut value. , seulement un état vérifié. Donc pour la case à cocher, si la lecture seule est définie, elle peut toujours être cochée/annulée.
<input type="checkbox" readonly>option a<br> <input type="checkbox" readonly>option b<br> <input type="checkbox" readonly>option c<br>
Mais comme en lecture seule, il existe également un attribut désactivé. La fonction de cet attribut est de définir l'élément de page pour qu'il soit indisponible, c'est-à-dire qu'aucune opération interactive ne peut être effectuée (y compris l'attribut value qui ne peut pas être modifié). , le statut vérifié ne peut être modifié, etc.).
<input type="checkbox" disabled>option a<br> <input type="checkbox" disabled>option b<br> <input type="checkbox" disabled>option c<br>
method 1:
in jQuery, vous pouvez utiliser attR () pour ajouter l'attribut désactivé à la case
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("input[type='checkbox']").attr("disabled", true);
});
});
</script>
</head>
<body>
<input type="checkbox">option a<br>
<input type="checkbox">option b<br>
<input type="checkbox">option c<br>
<br>
<button>让复选框只读</button>
</body>
</html>
method 2:
si vous utilisez désactivé = si la L'attribut "désactivé" est utilisé, la case à cocher deviendra grise et les utilisateurs peuvent être dégoûtés par l'effet. Vous pouvez également définir la case à cocher (case à cocher) pour qu'elle ne change pas d'état lorsqu'elle est cliquée.
$(document).ready(function() {
$("button").click(function() {
$("input[type='checkbox']").click(
function(){return false;}
);
});
});
Tutoriels vidéo associés recommandés : Tutoriel jQuery (Vidéo)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!