Schalten Sie den Javascript-Radiobutton-Einstellungswert programmgesteuert aus ⇐ HTML

[Guest]

Ich habe ein benutzerdefiniertes Steuerelement mit dem folgenden Code. Ich gehe davon aus, dass beim Neuladen der Seite „Option 1“ ausgewählt wird. Es ist aber nichts ausgewählt. Aber ich kann beide Optionen manuell auswählen.
Zunächst ist die Ausgabe

Code: Select all

Element value = on, Observable value = abc

Aber nach manueller Auswahl des Optionsfelds

Code: Select all

Change event: Setting observable to abc
Change event: Setting observable to def
Update: Element value = abc, Observable value = def
Update: Element value = def, Observable value = def
Change event: Setting observable to def
Change event: Setting observable to abc
Update: Element value = abc, Observable value = abc
Change event: Setting observable to abc
Update: Element value = def, Observable value = abc

Was ist falsch daran, den Anfangswert des Optionsfelds festzulegen?

Code: Select all

this.tempitems = ko.observableArray([{
guid: "abc",
name: "Option 1"
},
{
guid: "def",
name: "Option 2"
}
]);

this.tempitem = ko.observable("def"); // Initially selects "Option 2"
this.tempitem = ko.observable("abc");
console.log("Initial value of tempitem:", ko.unwrap(self.tempitem));

ko.bindingHandlers.rbChecked = {
init: function(element, valueAccessor, allBindingsAccessor,
viewModel, bindingContext) {
var value = valueAccessor();

// Handle the change event
ko.utils.registerEventHandler(element, "change", function() {
console.log(`Change event: Setting observable to ${element.value}`);
value(element.value); // Update the observable
});

// Set the initial checked state
if (ko.unwrap(value) === element.value) {
console.log("Init: Setting element.checked = true");
element.checked = true;
}

var newValueAccessor = function() {
return {
change: function() {
value(element.value);
}
}
};

ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);

if (value != undefined && $(element).val() == value()) {
setTimeout(function() {
var toggle = $(element).closest('.btn-toggle');
$(toggle).children('.btn').removeClass('active');
$(toggle).children('.btn').removeClass('btn-primary');
$(toggle).children('.btn').addClass('btn-default');

var btn = $(element).closest('.btn');
$(btn).addClass('btn-primary');
$(btn).addClass('active');

}, 0);
}
},
update: function(element, valueAccessor, allBindingsAccessor,
viewModel, bindingContext) {
const value = ko.unwrap(valueAccessor());
console.log(`Update: Element value = ${element.value}, Observable value = ${value}`);

// Ensure the checked state reflects the observable value
element.checked = value === element.value;

// If the radio button is checked, trigger the change event to update the observable
if (element.checked) {
element.dispatchEvent(new Event("change", {
bubbles: true
}));
}

if ($(element).val() == ko.unwrap(valueAccessor())) {

setTimeout(function() {
$(element).closest('.btn').toggleClass('active');

var toggle = $(element).closest('.btn-toggle');
$(toggle).children('.btn').removeClass('active');
$(toggle).children('.btn').removeClass('btn-primary');
$(toggle).children('.btn').addClass('btn-default');

var btn = $(element).closest('.btn');
$(btn).addClass('btn-primary');
$(btn).addClass('active');

}, 0);

}
}
};

Code: Select all

[list]
[*]




[/list]