单选按钮启用/禁用无法按预期工作

Question

我正在尝试使用以下功能切换radio按钮true或false。

但是作为第一次点击，我没有得到任何回复。后来它工作正常。要解决这个问题，这里有什么问题？

var switching = false;

$('button').on("click", function() {
  switching = switching == false ? switching = true : switching = false;
  console.log("switching", switching); //first click true but not works!
  $(":radio").attr("disabled", switching);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>
  Switch Me
</button>

Live Demo

Answer 1

您可以从true开始，然后按此switching = !switching

切换

var switching = true;

$('button').on("click", function() {
  switching = !switching
  $(":radio").attr("disabled", switching);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>
  Switch Me
</button>

Answer 2

或者你可以只用一行来做：

＆＃13;

＆＃13;

$('button').on("click", function() {
    $(":radio").prop('disabled', function(){ return !this.disabled });
});

＆＃13;

button.border { border:2px solid green; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>Switch Me</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您的三元运算符不正确应该是：

switching = switching == false ? true : false;

所以你的代码变成了：

var switching = false;

$('button').on("click", function(){
  switching = switching == false ? true : false;
  console.log( "switching", switching );
  $(":radio").attr("disabled", switching);

})

但第一次点击不适用于此，因此您需要将其初始化为true。

＆＃13;

＆＃13;

var switching = true;

$('button').on("click", function(){
  switching = switching == false ? true : false;
  console.log( "switching", switching );
  $(":radio").attr("disabled", switching);

})

＆＃13;

button.border{
border:2px solid green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>
  Switch Me
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您还可以先检查是否禁用

$('button').on("click", function() {

  if ($(":radio").prop('disabled')){
   $(":radio").attr("disabled", false);
  }
  else
  {
    $(":radio").attr("disabled", true);
  
  }
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Y" checked disabled>
<input type="radio" name="foo" value="N" disabled>
<input type="radio" name="foo" value="X" disabled>

<button>
  Switch Me
</button>

Answer 5

在HTML中添加公共类：

<input type="radio" name="foo" value="Y" checked disabled class="radio">
<input type="radio" name="foo" value="N" disabled class="radio">
<input type="radio" name="foo" value="X" disabled class="radio">

<button>
  Switch Me
</button>

现在这是你的JS使用类

$( document ).ready(function() {
  $('button').on("click", function(){
    if($('.radio').is(':enabled')) {  
        $(".radio").attr("disabled", true);
    }else {  
        $(".radio").attr("disabled", false);
    }
  });
});