動態隱藏的輸入字段以后無法顯示

Question

我有一個帶有文本輸入的表單和一個用於選擇是/否的單選按鈕對。 為了保持簡單，單選按鈕單擊事件檢查值，如果是，它顯示輸入文本字段。 如果不是，它會隱藏輸入字段。 我還檢查文檔就緒的初始狀態並顯示/隱藏輸入文本字段。

我發現單擊“否”會導致使用 jQuery.hide() 方法隱藏輸入。 但是當我選擇是時，resulting.show() 方法調用不顯示輸入。 如果我將收音機設置為是，然后刷新頁面，則輸入顯示正常。

Firebug 顯示沒有輸入標簽。 這就像點擊 No radio 刪除了 DOM 中的輸入。

這是 JS 代碼示例：

    $(document).ready(function() {
        if ($('#cost_sharing_yes').attr('checked') == 'checked') {
            $('input#Institutional_CS_TP').show();
        } else {
            $('input#Institutional_CS_TP').hide();
        }

        $('#cost_sharing_yes').click(function() {
            $('input[id="Institutional_CS_TP"]').show();
        });
        $('#cost_sharing_no').click(function() {
            $('input#Institutional_CS_TP').fadeOut("fast");
        });
    }        

Answer 1

您缺少)用於關閉就緒功能：

$(document).ready(function() {

} // <--  

為了正確獲取輸入的checked屬性，您應該使用prop方法而不是attr 。

$(document).ready(function() {
   var isChecked = $('#cost_sharing_yes').prop('checked');
   $('#Institutional_CS_TP').toggle(isChecked);
   // ..
})

Answer 2

我想通了我的問題。 這是一個自我造成的編碼問題。 為了使示例簡單，我刪除了混合中的另一個函數調用，我認為它對問題沒有任何影響。 我錯了。 在那個功能中我有

    $('td#Institutional_CS_TP).text('$0');
    $('input[name="Institutional_CS_TP"]').val('0.00');

這導致僅顯示 td 值，而不顯示同一 td 內的輸入。 我的 td 和 td 中的輸入標簽都具有相同的 ID 值……這不是一個好主意。

Answer 3

html代碼

<div id="myRadioGroup">

    Value Based<input type="radio" name="cars"  value="2"  />

    Percent Based<input type="radio" name="cars" value="3" />
    <br>
    <div id="Cars2" class="desc" style="display: none;">
        <br>
        <label for="txtPassportNumber">Commission Value</label>
       <input type="text" id="txtPassportNumber" class="form-control" name="commision_value" />
    </div>
    <div id="Cars3" class="desc" style="display: none;">
        <br>
        <label for="txtPassportNumber">Commission Percent</label>
       <input type="text" id="txtPassportNumber" class="form-control" name="commision_percent" />
    </div>
</div>

查詢代碼

function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}

function myFunction1() {
    var y = document.getElementById("myInput1");
    if (y.type === "password") {
        y.type = "text";
    } else {
        y.type = "password";
    }
}