ons-list-itemのtappable属性をons-switchの切り替えで追加・削除したい

Monacaを使ってアプリケーションを作っています。
ons-list-itemにons-switchを組み込み、
ons-switchの切り替えでons-list-itemのtappableを追加したり削除したりしたいと考えています。

propメソッドを使い、直近のons-list-itemのtappableを操作しようとしたのですが
上手くいきませんでした。

アドバイスのほどよろしくお願いいたします。

該当のソースコード

HTML
1<ons-list>
2　<ons-list-item modifier="chevron longdivider" tappable>
3　　<ons-switch class="listSwitch" checked></ons-switch>
4　　リストA
5　</ons-list-item>
6　<ons-list-item modifier="chevron longdivider" tappable>
7　　<ons-switch class="listSwitch" checked></ons-switch>
8　　リストB
9　</ons-list-item>
10</ons-list>

HTML
1  $(document).on("click", ".listSwitch", function (e) {
2    var thisItem = $(this).find("ons-list-item");
3    // alert("スイッチを切り替えました");
4    if (this.checked) {
5      //ONに切り替え
6      thisItem.prop('tappable', true);
7    } else {
8      //OFFに切り替え
9      thisItem.prop('tappable', false);
10    }
11  });

行動規範の内容に同意します

回答1件

ベストアンサー

Monaca関係なさそうなので単なるHTMLで試しました(Chromeで確認)

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
5  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
6  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
7  <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
8</head>
9<body>
10<ons-list>
11  <ons-list-item class="listItem" modifier="chevron longdivider" tappable>
12    <ons-switch class="listSwitch" checked></ons-switch>
13      リストA
14  </ons-list-item>
15  <ons-list-item class="listItem" modifier="chevron longdivider" tappable>
16    <ons-switch class="listSwitch" checked></ons-switch>
17    リストB
18  </ons-list-item>
19</ons-list>
20
21<script>
22  $(document).on("click", ".listSwitch", function (e) {
23    var thisItem = $(this).parents(".listItem");
24    // alert("スイッチを切り替えました");
25    if (this.checked) {
26      //ONに切り替え
27      thisItem[0].attributes.setNamedItem(document.createAttribute("tappable"));
28    } else {
29      //OFFに切り替え
30      thisItem[0].attributes.removeNamedItem('tappable');
31    }
32  });
33</script>
34</body>
35</html>