ラジオボタンが押された際に本当に押すか確認を促す方法

Question

ラジオボタンが押された際にそのボタンを本当に押すか確認を促したいです。
現在bootstrapを用いて複数のラジオボタンを表示しております。

bootstrap:buttons

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

リンクの通りにラジオをボタンを使ってみています。
ただ、ボタンが押された際に本当にそのボタンを押すか確認を促す方法がわかりません。

$('...').on('click', function(){
...
});

この形でボタンが押されたこと自体を取得できることは知っております。
今回教えていただきたいのはボタンを本当に押すかの確認でこれではなかったため、現在困っております。

よろしくお願いします。

Answer 1

$('label.btn').on('click', function(event) {
  if (!confirm('本当にいいですか？')) {
    event.preventDefault();
    return false;
  }
});

Answer 2

今回教えていただきたいのはボタンを本当に押すかの確認でこれではなかったため、現在困っております。

どのような確認するコードだったかわからないので確証はありませんが、ダイアログを出した後「いいえ」押したとき return false; する必要があります。

$('...').on('click', function(){
if(!window.confirm('おしていいんか？'));
return fasle;
});

Answer 3

ラジオボタンが押された際にそのボタンを本当に押すか確認を促したいです。

なんか気持ち悪い仕様ですけど、こういうことですか？

$(function(){
  var options_index=$('[name=options]').index($('[name=options]:checked'));
  $('[name=options]').on('change',function(){
    var yn=confirm("おす？");
    if(yn==false){
      $(this).prop('checked',false);
      if(options_index >=0 )$('[name=options]').eq(options_index).prop('checked',true);
    }else{
      options_index=$('[name=options]').index($(this));
    }
  });
});