动态隐藏的输入字段以后不能显示答案

【问题标题】：Input field hidden dynamically can not be shown later动态隐藏的输入字段以后不能显示
【发布时间】：2012-12-20 02:49:38
【问题描述】：

我有一个带有文本输入的表单和一个用于选择是/否的单选按钮对。为了简单起见，单选按钮单击事件检查该值，如果是，则显示输入文本字段。如果否，则隐藏输入字段。我还检查文档就绪的初始状态并显示/隐藏输入文本字段。

我发现单击 No 会导致使用 jQuery .hide() 方法隐藏输入。但是当我选择 Yes 时，结果 .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");
        });
    }

【问题讨论】：

尝试 if ($("#cost_sharing_yes").is(":checked")){} 也注意到 fadeOut .. 不应该有所作为，但使用 hide() .. 可能有问题有不透明度什么的

标签： javascript jquery show-hide textinput

【解决方案1】：

你缺少 ) 来关闭准备功能：

$(document).ready(function() {

} // <--

要获得输入的checked 属性，您应该使用prop 方法而不是attr。

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

【讨论】：

prop() 方法仅在您使用 jQuery >1.6 时使用。在以前的 jQuery 版本中，attr() 被用来操作“checked”。
@Dracs 是的，attr 很容易出错，他们创建了这个方法来处理属性。
是的，在我提供的引用示例中，我忘记添加结束符 ) 字符。我尝试修改我的代码以使用 .prop 方法而不是 .attr ，但这并不能解决我的输入没有在应该显示的时候显示的问题。有什么想法吗？

【解决方案2】：

我发现了我的问题。这是一个自己造成的编码问题。为了使示例简单，我删除了混合中的另一个函数调用，我认为这与问题没有任何关系。我错了。在那个功能中我有

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

这导致只显示 td 值，而不是同一 td 内的输入。我的 td 和 td 中的输入标签都具有相同的 ID 值……这不是一个好主意。

【讨论】：

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

jQuery 代码

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

【讨论】：