JQueryを使用してチェックボックスグループのバインドを解除する

Question

現在、select html要素のドロップダウンリストから値テストを選択すると、チェックボックスのグループをバインドする以下のjQueryスクリプトがあります。結果として、チェックボックスはラジオボタンのように動作し、一度に1つのチェックボックスをチェックすることができます。私の問題は、テスト値が選択された後、選択ボックスから別の値を選択するときにラジオボタンをデフォルトの動作に戻す必要があることです。どんな助けでも大歓迎です。私の下のjavascriptとhtmlコードを見てください。

$('select').on('change', function() { 
 
$('input.example').prop('checked', false); 
 

 
if(this.value == 'test') 
 
{ 
 
alert("Hello"); 
 
$('input.example').bind('change', function() { 
 
    $('input.example').not(this).attr('checked', false); 
 
}); 
 

 
} 
 

 
else if(this.value != 'test') 
 
{ 
 
alert("Bye"); 
 
$('input.example').unbind('change', function() { 
 
    $('input.example').not(this).attr('checked', false); 
 
});  
 

 
} 
 
});

<select id="myselect" name="action"> 
 
<option value="" selected="selected">-------------</option> 
 
<option value="deleted_selected">Delete selected Clients</option> 
 
<option value="test">Test</option> 
 
</select> 
 
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button> 
 
<br><br> 
 

 

 
<input type="checkbox" class="example" /> 
 
<input type="checkbox" class="example" /> 
 
<input type="checkbox" class="example" /> 
 
<input type="checkbox" class="example" />

Answer 1

あなたはそれをアンバインドするときに、同じ機能に言及されるように、あなたの変更ハンドラを名前空間ができます。変更の代わりに、変更イベントとして 'change.myChange'を使用して、後で簡単に解除できるようにしました。それ以外の場合は、実際には同じ関数を作成してから、作成してイベントにバインドしたものの代わりにアンバインドしようとしています。私はこれが役立つことを願っています

$('select').on('change', function() { 
 
    $('input.example').prop('checked', false); 
 
    if(this.value == 'test') { 
 
     $('input.example').bind('change.myChange', function() { 
 
     $('input.example').not(this).attr('checked', false); 
 
     }); 
 
    } else if(this.value != 'test') { 
 
     $('input.example').unbind('change.myChange');  
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="myselect" name="action"> 
 
<option value="" selected="selected">-------------</option> 
 
<option value="deleted_selected">Delete selected Clients</option> 
 
<option value="test">Test</option> 
 
</select> 
 
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button> 
 
<br><br> 
 

 

 
<input type="checkbox" class="example" /> 
 
<input type="checkbox" class="example" /> 
 
<input type="checkbox" class="example" /> 
 
<input type="checkbox" class="example" />

Answer 2

ここでは、この

$(function() { 

    $('select').on('change', function() { 
    $('input.example').prop('checked', false); 
    if (this.value == 'test') 
    { 
     alert('Hello'); 
     $('input.example').bind('change', changeHandler); 
    } 
    else if (this.value != 'test') 
    { 
     alert('Bye'); 
     $('input.example').unbind('change', changeHandler); 
    } 
    }); 
    function changeHandler() { 
    $('input.example').not(this).attr('checked', false); 
    } 

}); 

を試してみてください作業フィドルhttps://jsfiddle.net/wyd2206c/

Answer 3

は、あなたがこのように期待しているのですか？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
\t $('select').on('change', function() { 
 
\t \t if(this.value == 'test') 
 
\t \t { 
 
\t \t \t $('input.example').attr('type', 'radio'); 
 
\t \t \t $('input.example').attr('checked', false); 
 
\t \t }else if(this.value != 'test') 
 
\t \t { 
 
\t \t \t $('input.example').attr('type', 'checkbox'); 
 
\t \t \t $('input.example').attr('checked', false); 
 
\t \t } 
 
\t }); 
 
}); 
 
</script> 
 

 
<select id="myselect" name="action"> 
 
<option value="" selected="selected">-------------</option> 
 
<option value="deleted_selected">Delete selected Clients</option> 
 
<option value="test">Test</option> 
 
</select> 
 
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button> 
 
<br><br> 
 

 

 
<input type="checkbox" class="example" /> 
 
<input type="checkbox" class="example" /> 
 
<input type="checkbox" class="example" /> 
 
<input type="checkbox" class="example" />