Check box not working properly after iOS 9 update

ionic-v1
1

Hi,

        <label class="item item-radio" ng-repeat="x in listOfCountries | filter : searchText | orderBy : 'x'">
            <input type="checkbox" ng-model="x.selected" />
            <div class="item-content">
                <p>{{ x.country_name }}</p>
            </div>
            <i class="radio-icon ion-checkmark"></i>
        </label>
    </div>

I am using above code for selecting multiple options in a list. But when I select an option the tick mark is not appearing and it is getting displayed only after the list is scrolled up and down. Please suggest a fix. Thanks in Advance

2

there were some breaking changes in ios 9. have you seen max’s blog post? It has some fixes.

3

Yes I have seen it, but I couldn’t find a fix there. There was a fix regarding “ion-radio” but I am not using it. I am using check-box. It is working fine in iOS 7,8 but not working in iOS 9.

4

Can anybody please update on this issue if there is a solution or not. I have tried in different ways but couldn’t find the answer.

5

I’m having the same problem. Anyone?

7

same here, only in iOS 9, but it does not happne all the time.

8

As you can see in the ion-radio fix here https://gist.github.com/mlynch/064d27912b511a63caa3 the solution is a change in css for class item-radio. You are using this same class also.
Try if you can apply this css and see if it solves your issue.

9

@Shore Did you try modifying the css?

10

According to this solution you should replace your code

<label class="item item-radio" ng-repeat="x in listOfCountries | filter : searchText | orderBy : 'x'">
    <input type="checkbox" ng-model="x.selected" />
    <div class="item-content">
         <p>{{ x.country_name }}</p>
    </div>
    <i class="radio-icon ion-checkmark"></i>
</label>

With this one

<label class="item item-radio" ng-repeat="x in listOfCountries | filter : searchText | orderBy : 'x'">
    <input type="checkbox" ng-model="x.selected" />
    <div class="radio-content">
        <div class="item-content disable-pointer-events">
             <p>{{ x.country_name }}</p>
        </div>
        <i class="radio-icon disable-pointer-events ion-checkmark"></i>
    </div>
</label>
11

Yeah its working fine. Thanks @CAMOBAP :smile: