Question

当从select html元素的下拉列表中选择值测试时，我目前有以下jQuery脚本绑定一组复选框。因此，复选框就像单选按钮一样，可以同时检查一个复选框。我的问题是，在选择测试值后我从选择框中选择另一个值时，我需要单选按钮恢复默认行为，而我似乎无法弄明白。任何帮助将不胜感激。请参阅我的以下javascript和html代码。

＆＃13;

$('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);  
});    

}
});

＆＃13;

<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" />

＆＃13;

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(){
	$('select').on('change', function() {
		if(this.value == 'test')
		{
			$('input.example').attr('type', 'radio'); 
			$('input.example').attr('checked', false);  
		}else if(this.value != 'test')
		{
			$('input.example').attr('type', 'checkbox');  
			$('input.example').attr('checked', false);
		}
	});
});
</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" />

使用JQuery取消绑定一组复选框

3 个答案: