單選按鈕啓用/禁用不按預期方式工作

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

你的三元運算符是不正確它應該是：

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>

Answer 3

或者你也可以這樣做只是用一條線：

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

現在這裏是使用

類

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