在给定场景中切换 DropDownList 和 TextBox 之间的可见性？

Question

在我的项目中，我有两个名为 UserTypeRadio 的 RadioButtons。这样，我就有了 DropDownList 和 TextBox。我想 toggle DropDownList 和 TextBox 的可见性取决于选择了哪个 RadioButton。

单选按钮

<div class="row">
    <div class="col-sm-6 m-t-20">
        <label class="fg-labels">Type of User</label><br />
            <div class="col-sm-3">
                <label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" onclick="radioButtonEmployeeSelected()" checked class="userSelection" /> Employee</label>
            </div>
            <div class="col-sm-3">
                <label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" onclick="radioButtonOtherUserSelected()" class="userSelection" /> Other User</label>
            </div>
    </div>
</div>

下拉列表

<div class="row">
    <div class="col-sm-6 m-t-20">
        <div class="input-group fg-float">
            <div class="fg-line form-chose">
                <label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
                <select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames">
                    <option value=""></option>
                </select>
            </div>
        </div>
    </div>
</div>

文本框

<div class="col-sm-6 m-t-20">
    <div class="input-group fg-float">
        <div class="fg-line">
            <label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
            <input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" hidden />
            <span asp-validation-for="OtherUser" class="text-danger"></span>
        </div>
    </div>
</div>

jQuery代码

$('.userSelection').on('change', function () {
    //alert($(this).val());
    //if ($(this).val() === "Employee") {
        $("#textBoxOtherUser").toggle();
        $("#dropDownUserNames").toggle();
    //}
});

我试图在从 RadioButton 中选择 Employee 时隐藏 TextBoxOtherUser，当我单击 Other User 时我试图隐藏 DropDownUserNames来自 RadioButton.

的选项

toggle() 表现符合预期。但是，在从浏览器执行 Inspect Element 时，当从 RadioButton 中选择 Other User 时，我看到 DropDownList 没有被禁用。事实上，我看到当 Employee 未被选中时，style="display: inline-block;" 出现在代码中。 On the other hand, when the Employee is selected, style="display: none;" is shown.换句话说，在选择 Employee 时会在所需的 UI 中显示 DropDownList。但是，当 Employee 未被选中时，DropDownList 不会被禁用，而是以普通的旧块格式显示。

怎么办？

Answer 1

通过使用 data 属性你可以做到这一点.. 为员工和其他用户无线电输入添加 data-user 并将 data-show 添加到相关的 select/textbox 然后你可以使用下一个代码

$('[name="UserTypeRadio"]').on('change' , function(){
  var Thisvalue = $(this).attr('data-user');
  $('[data-show]').hide().filter('[data-show="'+Thisvalue+'"]').show();
}).filter(':checked').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-sm-6 m-t-20">
        <label class="fg-labels">Type of User</label><br />
            <div class="col-sm-3">
                <label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" checked class="userSelection" data-user="employee"/> Employee</label>
            </div>
            <div class="col-sm-3">
                <label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" class="userSelection" data-user="otheruser"/> Other User</label>
            </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6 m-t-20">
        <div class="input-group fg-float">
            <div class="fg-line form-chose">
                <label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
                <select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames" data-show="employee">
                    <option value=""></option>
                </select>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-6 m-t-20">
    <div class="input-group fg-float">
        <div class="fg-line">
            <label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
            <input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" data-show="otheruser" />
            <span asp-validation-for="OtherUser" class="text-danger"></span>
        </div>
    </div>
</div>

Note: if you include your js code before including jquery you'll need to wrap your js code inside $(document).ready(function(){ // code here })

最后，如果您需要隐藏整个 row，您可以简单地剪切 /粘贴 data-show 属性而不是 select 或文本框

$('[name="UserTypeRadio"]').on('change' , function(){
  var Thisvalue = $(this).attr('data-user');
  $('[data-show]').hide().filter('[data-show="'+Thisvalue+'"]').show();
}).filter(':checked').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-sm-6 m-t-20">
        <label class="fg-labels">Type of User</label><br />
            <div class="col-sm-3">
                <label><input type="radio" name="UserTypeRadio" id="radioButtonEmployee" value="Employee" checked class="userSelection" data-user="employee"/> Employee</label>
            </div>
            <div class="col-sm-3">
                <label><input type="radio" name="UserTypeRadio" id="radioButtonOtherUser" value="OtherUser" class="userSelection" data-user="otheruser"/> Other User</label>
            </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-6 m-t-20" data-show="employee">
        <div class="input-group fg-float">
            <div class="fg-line form-chose">
                <label asp-for="UserId" class="fg-labels" for="userId">User Name</label>
                <select asp-for="UserId" asp-items="ViewBag.Users" class="chosen disabledropdowncntrl" data-placeholder="Choose a User" name="userId" id="dropDownUserNames">
                    <option value=""></option>
                </select>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-6 m-t-20" data-show="otheruser">
    <div class="input-group fg-float">
        <div class="fg-line">
            <label asp-for="OtherUser" class="fg-label" for="otherUser">Other User</label>
            <input asp-for="OtherUser" class="form-control" id="textBoxOtherUser" name="otherUser" />
            <span asp-validation-for="OtherUser" class="text-danger"></span>
        </div>
    </div>
</div>

通过在末尾添加 .filter(':checked').change(); 这意味着运行加载时检查的无线电的更改事件

在给定场景中切换 DropDownList 和 TextBox 之间的可见性？

Toggle visibility between DropDownList and TextBox in the given scenario?

javascript

asp.net-mvc

jquery

toggle