Question 50678 in Javascript Question posted in
A very good W3school tutorial can be found here.

If toggle one is switched off and then toggle two is switched off by the users then toggle one should be switched on – Javascript

I am quite new to knockoutjs and I am trying to create two toggles. When toggle one is switched off and then toggle two is switched off by the user, toggle one should be switched on and vice versa.

function alternatetogglesWithOrWithoutCreditRequests() {
    if (!viewModel.withPendingCreditRequests()) {
        viewModel.withoutPendingCreditRequests(true)
    }
    else if (!viewModel.withoutPendingCreditRequests()) {
        viewModel.withPendingCreditRequests(true)
    }
}

This code above does not work all the time because in both cases the withPendingCreditRequests and the withoutPendingCredit observables are false. The first statement will always be run in this scenario and it will not reach the else if statement.

Below is the HTML for the toggles:

<div>
     <toggle-switch params="enable: invoiceFiltersActive, checked: withPendingCreditRequests, label: 'With Pending Credit Requests'"> 
     </toggle-switch>
</div>
<div>
     <toggle-switch params="enable: invoiceFiltersActive, checked: withoutPendingCreditRequests, label: 'Without Pending Credit Requests'">
     </toggle-switch>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    If anyone else is trying to still figure it out, I managed to find a way to make it work. On the html I have added data-bind to methods that handle clicks.

    function clickWithPendingCreditRequests() {
            if (!viewModel.withPendingCreditRequests() && !viewModel.withoutPendingCreditRequests()) {
                viewModel.withoutPendingCreditRequests(true)
            }
        }

        function clickWithoutPendingCreditRequests() {
            if (!viewModel.withoutPendingCreditRequests() && !viewModel.withPendingCreditRequests()) {
                viewModel.withPendingCreditRequests(true)
            }
        }
     <div>
            <toggle-switch params="enable: invoiceFiltersActive, checked: withPendingCreditRequests, label: 'With Pending Credit Requests'" data-bind="clickWithPendingCreditRequests"></toggle-switch>
        </div>
        <div>
            <toggle-switch params="enable: invoiceFiltersActive, checked: withoutPendingCreditRequests, label: 'Without Pending Credit Requests'" data-bind="clickWithoutPendingCreditRequests"></toggle-switch>
        </div>

    And on the view-model I have created those two methods with the following logic


  2. 0

    Knockout has the ability to subscribe to observables, so you can watch for changes. That would be a cleaner approach:

    function ViewModel() {    
    this.checkboxOne = ko.observable(false);
    this.checkboxTwo = ko.observable(false);
    
    this.checkboxOne.subscribe(newVal => {
        if (!newVal && !this.checkboxTwo()) {
            this.checkboxTwo(true);
        }
    });
    
    this.checkboxTwo.subscribe(newVal => {
        if (!newVal && !this.checkboxOne()) {
            this.checkboxOne(true);
        }
    });
}

    You can see it in action here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search