data属性を替えてもイベントで正常に動作しない

Question

下記のような削除ボタンがあります（一部なぜかコメントアウトされてしまっておりますがご了承ください）

 content_tag(:div, '削除', class: 'button btn btn-outline-danger trigger-delete-modal', type: 'button', data: { toggle: 'modal', target: "#delete-modal", role: role, exists: false })

上記で設定されていたdata: { toggle: 'modal', target: "#delete-modal", role: role, exists: false }のうち、exists = trueに書き換えます

$(`.role-${roleName}-${relativeId}`).children('.trigger-delete-modal').data('exists', true);

下記のjsはexists = falseでないとセレクトボックスにて選択できないようにするjsです。

// 既に設定されている役割はグレーアウト(disabledを付与)
$('.set-role-btn').on('click', function(){
  var existence = $('.relative-role-list').find(`[data-role=${role}]`).data('exists');
    if(existence){ //←ここで exists =trueならばセレクトボックスから選択できなくさせる
      $('.role-select-box').children(`[value=${role}]`).prop('disabled', true);
    }
  })
});

確かに2番めのjsで書き換えているはずなのに想定する挙動になりません（選択不可にならない）
これはなぜでしょうか？

attrも試しましたが両方ダメです・・・
どうすればよろしいでしょうか？

よろしくお願いいたします。

Comments

[yambejp]

jsの挙動を確認したいなら一旦rubyで記載した部分はすべてやめて
HTMLとjs(含むjQuery)で質問されたほうが良いと思います。
role、roleName、relativeIdなどがjsとしてちゃんと参照できていますか？
どこから持ってきているかちょっと判断できませんが・・・

Answer 1

単にオブジェクトがつかめてないだけかもしれませんね

<script>
$(function(){
  $('#test1').data('exists', true);
  console.log($('#test1').data('exists'));
  $('#test2').data('exists', true);
  console.log($('#test2').data('exists'));
});
</script>
<div id="test1">test</div>