Hey,
I have a problem that I'm trying to get the text on a button to change when a checkbox is checked, the code works and disables the button if the dates have expired and the expected text displays, but the text seems to get mixed up with the previous function that has run when you check the other checkbox. i.e. the first picture is as expected, buttons disabled and the text shows on the disabled buttons.
![](https://static.wixstatic.com/media/a27d24_6feaeb88425f478b90ff62a00086da5d~mv2.jpg/v1/fill/w_147,h_43,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_6feaeb88425f478b90ff62a00086da5d~mv2.jpg)
But when you click the 2019 box, the button enable, but the previous text stays... I have adjusted the code about 5/6 different ways but can't get it to stop doing this, any ideas??
![](https://static.wixstatic.com/media/a27d24_1c82a60f1a7544b2a437a3fbea1b1353~mv2.jpg/v1/fill/w_147,h_45,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_1c82a60f1a7544b2a437a3fbea1b1353~mv2.jpg)
Here is my code, I have only given the code for 2 buttons to keep the code easier to read.
$w.onReady(function () {
currentYearButtonDisable();
for (let i = 1; i < 3; i++) {
$w(`#checkbox${i}`).onChange(() => {
const checkBoxes = ['checkbox1', 'checkbox2'];
let filtered = checkBoxes.filter(item => item !== `checkbox${i}`);
filtered.forEach((checkbox) => {
$w(`#${checkbox}`).checked = false;
});
if ($w('#checkbox1').checked) {
currentYearButtonDisable();
}
if ($w('#checkbox2').checked) {
nextYearButtonDisable();
}
});
}
});
function nextYearButtonDisable () {
var itemDate = $w("#dynamicDataset").getCurrentItem();
var DateOne= itemDate["dateOneYh"];
var DateTwo= itemDate["dateTwoYh"];
var currentDate= new Date();
if (DateOne, DateTwo !== undefined) {
if (DateOne<currentDate) {
$w("#bookhere1").disable();
$w("#bookhere1").label = "Trip Expired"
}
else $w("#bookhere1").enable();
if (DateTwo<currentDate) {
$w("#bookhere2").disable();
$w("#bookhere2").label = "Trip Expired"
}
else $w("#bookhere2").enable();
}
function currentYearButtonDisable () {
var itemDate = $w("#dynamicDataset").getCurrentItem();
var Date1= itemDate["dateone"];
var Date2= itemDate["dateTwo"];
var currentDate= new Date();
if (Date1, Date2 !== undefined) {
if (Date1<currentDate) {
$w("#bookhere1").disable();
$w("#bookhere1").label = "Trip Expired"
}
else $w("#bookhere1").enable();
if (Date2<currentDate) {
$w("#bookhere2").disable();
$w("#bookhere2").label = "Trip Expired"
}
else $w("#bookhere2").enable();
}
Hi @Massa salah,
Sorry for the delayed response. And thank you for your suggestion, it makes a lot of sense. The only area I'm struggling with is how to populate the dates, as there are different dates for each button, how can I connect different database fields to different columns in the repeater??
Best wishes
Stephen
Hello Stephen ,
it seems for me like you only need to add the .label when enabling and disabling, see the following:
if (DateOne < currentDate) { $w("#bookhere1").disable(); $w("#bookhere1").label = "Trip expired" } else { $w("#bookhere1").enable(); $w("#bookhere1").label = "Book for this day" }
However i have a suggestion for your page, i recommend you use a repeater to show the trips it'll make your code shorter and easier to set. you can check the if condition for each item and based of that you set the label. see: repeater documentation
Best
Massa
Hi Massa,
Thank you for your response. My coding has come a long way in the past year but it is usually joining pieces of code together then trail and error.
I have never done anything like you have mentioned above, would you be able to give me an example of some code?
Many thanks
Stephen
Hello
Try storing the original text in a temp value and on the else statement when enabling the button set it's text again to temp (or simply to the wanted text as applied previously).
Best
Massa