Question

不确定标题是否有意义，但是当我们选择是/否单选按钮时，我有下面的代码可以隐藏/显示某些字段

<div class="container" style="width:100%;margin-top:2%">
@if (Model != null)
{
    using (Html.BeginForm("NextButton_Click", "Questionnaire", FormMethod.Post))
    {
        <table class="table table-hover">
            <tbody>
                @for (int i = 0; i < Model.QuestionsPaging.Count(); i++)
                {
                    ...
                    <tr>
                        <td>
                            <p>
                                @Html.RadioButtonFor(n => n.QuestionsAnswers[index].HasAnswer, false, new { @radioIndex = i, @onchange = "CallChangefunc(this)" }) @Html.Label("No")
                                @Html.RadioButtonFor(n => n.QuestionsAnswers[index].HasAnswer, true, new { @radioIndex = i, @onchange = "CallChangefunc(this)" }) @Html.Label("Yes")
                            </p>
                            <div id="div_questions_@i" style="display:none">
                                ...
                            </div>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    }
}

<script type="text/javascript">
    function CallChangefunc(myRadioButton) {
        var divName = "div_questions_" + myRadioButton.getAttribute("radioIndex");
        var divElement = document.getElementById(divName);

        if ($(myRadioButton).val().toLowerCase() === "true") {
            if (divElement.style.display != 'inline') {
                divElement.style.display = 'inline';
            }
        } else {
            if (divElement.style.display != 'none') {
                divElement.style.display = 'none'
            }
        }
    }
</script>

代码工作正常，我单击单选按钮，它按预期方式隐藏/显示了div。我遇到的问题是，当我加载表单时，它按预期选择了RadioButton，但是事件“ onchange”没有被触发，因此即使某些单选按钮设置为yes，我也隐藏了所有字段。

我没有太多的网络经验，不确定如何解决它，我尝试了一些东西，但是没有用，欢迎任何帮助。

谢谢。

解决方案：谢谢@jom

我添加了“ $（'：radio [id ^ =“ QuestionsAnswers”]'）。trigger（'change'）;“并检查是否选中了单选按钮，因为“ .trigger（'change'）”会触发每个单选按钮的事件，现在我有了：

<script type="text/javascript">
    $(document).ready(function () {
        $(':radio[id^="QuestionsAnswers"]').trigger('change');
    });

    function CallChangefunc(myRadioButton) {
        var divName = "div_questions_" + myRadioButton.getAttribute("radioIndex");
        var divElement = document.getElementById(divName);

        if ($(myRadioButton).val().toLowerCase() === "true" && myRadioButton.checked) {
            if (divElement.style.display != 'inline') {
                divElement.style.display = 'inline';
            }
        } else if ($(myRadioButton).val().toLowerCase() === "false" && myRadioButton.checked) {
            if (divElement.style.display != 'none') {
                divElement.style.display = 'none'
            }
        }
    }
</script>

Answer 1

在$(document).ready或结束</body>标记之前执行此操作。

  $(':radio[id^="QuestionsAnswers"]').trigger('change');

  // Or attach the handlers by script instead of going through Razor engine

  $(':radio[id^="QuestionsAnswers"]').change(function () {
    CallChangefunc(this);
  });

Answer 2

在$(document).ready之前添加function CallChangefunc(myRadioButton)

加载页面后RadioButtonFor不调用onchange

2 个答案: