无线电按钮启用/禁用无法正常工作

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>

实时演示

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

，或者您只需使用一行：

$('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>

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。

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>

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);
    }
  });
});