How to prevent action on specific rows in listview


#1

Given the following javascript:

$(function () {
    $('#list').mobiscroll().listview({
        stages: [{
            percent: -20,
            color: 'red',
            icon: 'remove',
            action: function (event, inst) {
                inst.remove(event.target);
                return false;
            }
        }]
    });
});

And the following HTML

<ul id="list" class="mbsc-cloak">
  <li>Washington</li>
  <li>Florida</li>
  <li>Los Angeles</li>
  <li>San Francisco</li>
</ul>

How do I prevent, for example, Los Angeles from being actionable?


#2

Hi Vincent,

You can disable an action for any item with the disabled property. Ex:

$('#list').mobiscroll().listview({
    stages: [{
        percent: -20,
        color: 'red',
        icon: 'remove',
        disabled: function (event, inst) {
            // Disable this action only for the item with 3 as id. 
            if (event.target.getAttribute('data-id') === '3') {
                return true;
            }
        },
        action: function (event, inst) {
            inst.remove(event.target);
            return false;
        },
    }]
});

<ul id="list" class="mbsc-cloak">
    <li data-id="1">Washington</li>
    <li data-id="2">Florida</li>
    <li data-id="3">Los Angeles</li>
    <li data-id="4">San Francisco</li>
</ul>

#3

Thank you. That worked perfectly!