So ändern Sie den Status des ausgewählten Kontrollkästchens in Uniapp

So ändern Sie den Status des ausgewählten Kontrollkästchens in uniapp: Öffnen Sie zuerst die entsprechende Codedatei und ändern Sie dann den ausgewählten Status, indem Sie den Code „if(e.detail.value.length>0){self.limitArea=1...“ hinzufügen. }" Dürfen.

Die Betriebsumgebung dieses Artikels: Windows7-System, Uni-App2.5.1-Version, DELL G3-Computer.

So zeichnen Sie ein Uniapp-Kontrollkästchen auf und ändern dynamisch den Prüfstatus

Szenario: Wenn der Benutzer im deaktivierten Zustand auf das Kontrollkästchen klickt, werden Bestätigung und Abbruch angezeigt. Klicken Sie auf „OK“, um es standardmäßig zu aktivieren Abbrechen, um zum deaktivierten Zustand zurückzukehren.

Normalerweise geschieht dies wie folgt:

<checkbox-group @change="checkboxChange" name="limitarea" >
<label>
<checkbox value="1" :checked="limitArea"/>
<text>限定地区</text>
</label>
</checkbox-group>
<script>
export default {
data() {
return {
limitArea:0
}
},
methods: {
checkboxChange: function(e){
var self = this;
if( e.detail.value.length > 0 ){
uni.showModal({
title: &#39;限定地区&#39;,
content: &#39;限定地区，可能需要等待较长时间&#39;,
confirmText: "确定",
cancelText: "取消",
success: function (res) {
if (res.confirm) {
self.limitArea = 1;
}else{
self.limitArea = 0;
}
}
});
}else{
this.limitArea = 0;
}
}
},
components: {}
}
</script>

:checked="limitArea" oben ist der Anzeigestatus an limitArea gebunden. Ich habe jedoch festgestellt, dass sich der limitArea-Wert auf 0 geändert hat, obwohl ich auf „Abbrechen“ geklickt habe. Logischerweise sollte das Kontrollkästchen deaktiviert sein, aber der angezeigte aktivierte Status ist immer noch aktiviert. Ich verstehe den Grund nicht. Lösung:

checkboxChange: function(e){
var self = this;
if( e.detail.value.length > 0 ){//点击勾选
self.limitArea = 1;  // *****加上这句代码*******
uni.showModal({
title: '限定地区',
content: '限定地区，可能需要等待较长时间',
confirmText: "确定",
cancelText: "取消",
success: function (res) {
if (res.confirm) {
self.limitArea = 1;
}else{
self.limitArea = 0;
}
}
});
}else{
this.limitArea = 0;
}
}

Szenario 2:

Zum Überprüfen klicken, aber wir möchten es nicht überprüfen und erzwingen, dass es in den nicht überprüften Zustand zurückkehrt. Eine direkte Änderung des limitArea-Werts wird nicht wirksam. Die Lösung lautet: Es erscheint eine Eingabeaufforderung. Klicken Sie auf „OK“ und ändern Sie dann den Wert in „OK“. Sie müssen jedoch weiterhin auf das Problem des ersten Szenarios achten.

Empfohlen: „uniapp-Tutorial“

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Status des ausgewählten Kontrollkästchens in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!