javascript - 如何根据编辑页面上复选框的值隐藏和显示字段

Question

我有一个页面，我应该在其中通过单选按钮的值隐藏或显示诸如 1 个下拉列表和 1 个文本框之类的字段。它在“添加用户”页面中工作正常，但在编辑用户时，当时它不起作用。有人可以帮助我如何检查页面加载本身的条件

<label class="form>
        Active
   @Html.RadioButtonFor(m => m.IsActive, true, new { onclick = "Hide()" })


        </label>
   <label class="form">
      InActive
     @Html.RadioButtonFor(m => m.IsActive, false, new { onclick="Show()"})


          </label>

function Hide()
    {
        $('#Reasondiv').hide();
    }
    function Show()
    {
        $('#Reasondiv').show();
    }

在加载编辑页面本身时，我需要检查 IsActive 是 true 还是 false，以便根据它我可以显示或隐藏 div

Answer 1

使用 JQuery 方法，您需要稍微修改 HTML，并需要为编辑页面添加几行代码，如下所示:

HTML:

<label class="form ActiveRadioContainer">
        Active
   @Html.RadioButtonFor(m => m.IsActive, true, new { onclick = "Hide()" })
        </label>
<label class="form InActiveRadioContainer">
      InActive
    @Html.RadioButtonFor(m => m.IsActive, false, new { onclick="Show()"})
</label>

添加了单独的类作为ActiveRadioContainer和InActiveRadioContainer，然后添加所需的JQuery代码:

$(document).ready(function(){
    var isActive = $(".ActiveRadioContainer input[type=radio]").is(":checked");

    if(isActive){
        $('#Reasondiv').hide();
    }
    else
    {
        $('#Reasondiv').show();
    }
});