如何在选中选项按钮时禁用和启用

Question

我有两组选项按钮，假设qtr1和qtr2代码如下：

<input type="radio" id="qtr1" name="qtr1" value="Quarter-1">Quarter-1 <input type="radio" id="qtr2" name="qtr2" value="Quarter-2">Quarter-2 <input type="radio" id="qtr2" name="qtr2" value="Quarter-3">Quarter-3

现在，当我检查了qtr1和qtr2时，仍然会检查qtr1。如何使用jQuery启用或禁用选项按钮。

提前谢谢。

Answer 1

如果您使用选项/单选按钮保持同名 for all选项按钮，那么您不需要为此实现任何javascript/jquery。

    <form>
<input type="radio" id="qtr1" name="qtr1"  value="Quarter-1">Quarter-1
<input type="radio" id="qtr2" name="qtr2" value="Quarter-2">Quarter-2
<input type="radio" id="qtr2" name="qtr2" value="Quarter-3">Quarter-3
    </form>

下面是使用jquery的脚本

$("input[type='radio']").click(function(){

  $("input[type='radio']").prop('checked', false);

  $(this).prop('checked', true);

});

实例JS-BIN

Answer 2

试试这个：

$('input:radio').click(function() { 
           var gname=$(this).attr('name');
        if(gname=='qtr1')
        {
            $('input[name="qtr2"]').prop('checked', false);
        }
        else
        {
            $('input[name="qtr1"]').prop('checked', false);
        } });