单选按钮启用/禁用未按预期工作答案

【问题标题】：radio button enable/disable not working as expected单选按钮启用/禁用未按预期工作
【发布时间】：2017-04-19 19:25:14
【问题描述】：

我正在尝试使用以下功能切换我的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

【问题讨论】：

更新小提琴 - jsfiddle.net/qqVGu/592

标签： javascript jquery radio-button

【解决方案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>

【讨论】：

【解决方案2】：

或者你可以只用一行来完成：

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

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

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

【讨论】：

【解决方案3】：

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

switching = switching == false ? true : false;

所以你的代码变成了：

var 切换 = false;

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

})

但第一次单击将无法使用此功能，因此您需要将其初始化为 true。

var switching = true;

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

})

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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);
    }
  });
});

【讨论】：