隐藏/显示@Html.TextBoxFor

Question

我有以下代码显示姓名、姓氏、复选框和文本框：

        <td>
        @for (var i = 0; i < Model.checkBoxListTeamA.Count();i++ )
        {
            <div class="ScorerCheckboxList">
                @Html.HiddenFor(it => it.checkBoxListTeamA[i].PlayerId)
                @Html.Label(Model.checkBoxListTeamA[i].PlayerName)
                @Html.Label(Model.checkBoxListTeamA[i].PlayerSurname)
                @Html.CheckBoxFor(it => it.checkBoxListTeamA[i].Checked, new { id="CheckBoxA" })
                @Html.TextBoxFor(it => it.checkBoxListTeamA[i].NoOfGoals, new { id="TextBoxA",     style="width:20px;" })
            </div>
            <br/>
        }
    </td>

我还有以下Jquery脚本：

<script type='text/javascript'>
$(document).ready(function () {
        ShowHideTextBox();
        $('#CheckBoxA').click(function (event) {
            alert('clicked');
            ShowHideTextBox();
    });
});

function ShowHideTextBox() {
    if ($('#CheckBoxA').is(':checked')) {
            $('#TextBoxA').attr('visible', true);
        }
        else {
            $('#TextBoxA').removeAttr('visible');
        }
   }
</script>

但是，我没有达到我想要的目的(当用户单击复选框时，我想显示文本框，如果复选框被取消勾选，那么我想隐藏复选框。

我的剧本怎么了？我甚至没有得到点击时，复选框被选中！

谢谢你的帮助和时间

更新JQUERY？

<script type='text/javascript'>
$(document).ready(function () {
        ShowHideTextBox();
});

function ShowHideTextBox() {
    $('.ScorerCheckboxList :checkbox').click(function () {
        alert('Checked!');
        $(this).siblings('input[type="text"]').toggle(this.checked);
    });
}
</script>

Answer 1

你有一些问题。

首先，没有visible属性。尝试使用toggle(bool)，其中bool是元素是否应该显示。

其次，您有一个生成输出的for循环，这意味着您将得到多个具有相同id的元素，这违反了规则。将其更改为类似于id="CheckBoxA"+i的内容。

第三，在更改id之后，您的jQuery将无法工作，并且会影响到比您预期的更多的元素。试着做这样的事情：

$('.ScorerCheckboxList :checkbox').click(function() {
    $(this).siblings('input[type="text"]').toggle(this.checked);
});

编辑-完整的javascript：

$(document).ready(function() {
    $('.ScorerCheckboxList :checkbox').click(function() { ShowHideTextBox(this); })
        .each(function() { ShowHideTextBox(this); });
});

function ShowHideTextBox(elem) {
    $(elem).siblings('input[type="text"]').toggle(elem.checked);
}

Answer 2

尝试：

function ShowHideTextBox() {
    if ($('#CheckBoxA').is(':checked')) {
        $('#TextBoxA').show();
    }
    else {
        $('#TextBoxA').hide();
    }
}