JQuery中的自動檢查單選按鈕（根據其他值將單選按鈕標記爲選中/取消選中）

Question

基於某個模型中的某個值從下拉菜單中選擇，我想要「自動檢查」一個單選按鈕。

基本上，如果我們已經從系統的其他地方知道這些信息，我只是簡單地將答案標記爲「是」。

但我得到一個非常奇怪的圖形錯誤，代碼只能工作一次。後續調用不會「檢查」單選按鈕：

function brokenAutoCheck() { 
 
    if (HasDescription) { 
 

 

 

 
    $('input[name=AttachedJobDescription][value=True]').attr('checked', true); 
 
    $('input[name=AttachedJobDescription][value=False]').attr('checked', null); 
 

 
    $('input[name=AttachedJobDescription][value=True]').attr('disabled', true); 
 
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', true); 
 

 
    } else { 
 

 
    $('input[name=AttachedJobDescription][value=True]').attr('checked', null); 
 
    $('input[name=AttachedJobDescription][value=False]').attr('checked', null); 
 

 
    $('input[name=AttachedJobDescription][value=True]').attr('disabled', null); 
 
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', null); 
 

 
    } 
 
    HasDescription = !HasDescription; 
 

 
} 
 
var HasDescription = true;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Yes 
 
<input data-val="true" data-val-required="The Attached Job Description field is required." id="AttachedJobDescription" name="AttachedJobDescription" onchange="showJobDescriptionDocument();" type="radio" value="True">No 
 
<input id="AttachedJobDescription" name="AttachedJobDescription" onchange="showJobDescriptionDocument();" type="radio" value="False"> 
 

 

 

 

 
<br> 
 
<button type="button" onclick="brokenAutoCheck()">Work Once AutoCheck</button>

注：有趣的是，如果你設置的jQuery版本1.3.1這個作品！

Answer 1

這絕對是那些奇怪的小問題之一，可以使用稍微不同的Jquery版本和稍微不同的語法。

下面的代碼顯示你現在什麼對我的作品和相應的無工作的版本（在jQuery的1.3.1工程）：

function autoCheck() { 
 
    if (HasDescription) { 
 
    $('input[name=AttachedJobDescription][value=True]').prop('checked', true); 
 

 
    $('input[name=AttachedJobDescription][value=True]').attr('disabled', true); 
 
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', true); 
 

 
    } else { 
 
    $('input[name=AttachedJobDescription]').prop('checked', false); 
 

 
    $('input[name=AttachedJobDescription][value=True]').attr('disabled', null); 
 
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', null); 
 

 
    } 
 
    HasDescription = !HasDescription; 
 

 
} 
 

 

 

 
function brokenAutoCheck() { 
 
    if (HasDescription) { 
 

 

 

 
    $('input[name=AttachedJobDescription][value=True]').attr('checked', true); 
 
    $('input[name=AttachedJobDescription][value=False]').attr('checked', null); 
 

 
    $('input[name=AttachedJobDescription][value=True]').attr('disabled', true); 
 
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', true); 
 

 
    } else { 
 

 
    $('input[name=AttachedJobDescription][value=True]').attr('checked', null); 
 
    $('input[name=AttachedJobDescription][value=False]').attr('checked', null); 
 

 
    $('input[name=AttachedJobDescription][value=True]').attr('disabled', null); 
 
    $('input[name=AttachedJobDescription][value=False]').attr('disabled', null); 
 

 
    } 
 
    HasDescription = !HasDescription; 
 

 
} 
 
var HasDescription = true;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Yes 
 
<input data-val="true" data-val-required="The Attached Job Description field is required." id="AttachedJobDescription" name="AttachedJobDescription" onchange="showJobDescriptionDocument();" type="radio" value="True">No 
 
<input id="AttachedJobDescription" name="AttachedJobDescription" onchange="showJobDescriptionDocument();" type="radio" value="False"> 
 

 

 

 
<br> 
 
<button type="button" onclick="autoCheck()">AutoCheck (Works)</button> 
 
<br> 
 
<br> 
 
<button type="button" onclick="brokenAutoCheck()">AutoCheck (Work Once)</button> 
 
<br>

現在，如果你閱讀Jquery documentation attr它確實特別提到了檢查：

「屬性與屬性

屬性和特性之間的差異可以在 特定情況下是很重要的。在jQuery 1.6之前，.attr（）方法有時在檢索某些屬性時會考慮屬性值， 可能會導致行爲不一致。從jQuery 1.6開始，.prop（） 方法提供了顯式檢索屬性值的方法，而 .attr（）檢索屬性。

例如，的selectedIndex，標記名的nodeName，節點類型， ownerDocument，defaultChecked和defaultSelected應檢索 並與.prop（）方法設置。在jQuery 1.6之前，這些屬性 可以通過.attr（）方法獲取，但這不在attr的 範圍內。這些不具備相應的屬性，並且僅 屬性。」

這是什麼導致我試圖‘託’，但再次道具的行爲似乎版本之間的不同，在我們的代碼是1.8.24（在一個MVC 4.0應用程序中）簡單地用「prop」代替「attr」不起作用，然而它似乎在這個片段中起作用......瘋狂！在我們的版本中，我們不得不刪除了編輯「no 「單選按鈕讓它起作用

我認爲這歸結於這樣一個事實，即在HTML域中，選中的廣播具有」已檢查「屬性，而當它沒有檢查到d，它簡單的沒有這個屬性（如同意識別它是真/假）。

因此，當jquery設置爲true而不是true時將屬性設置爲「true」應該將其添加回來，並且沿着該行的某處必須將「attr」行爲更改爲不「添加」屬性...一旦被刪除。至少JQuery似乎稍微改變了如何處理這個問題，特別是在1.6之後，以及可能的一些調整在行爲上更一致。

希望這將是任何人的樂趣與您正在使用什麼版本的jQuery不是1.3.1 jQuery和無線電盒

Answer 2

有用嗎？

由於jQuery 1.6建議使用.prop（）而不是.attr（）。

$(" selector ").prop("checked", true); 

Answer 3

我想你應該只是讓AttachedJobDescription一個複選框，而不是單選按鈕。

單選按鈕將被用作一組其他單選按鈕，它們具有相同的名稱以選擇多個值中的一個。見https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/