Question

在我的项目中，我有两个名为RadioButtons的{{1}}。有了这个，我有一个UserTypeRadio和一个DropDownList。我希望TextBox toggle和DropDownList的可见性取决于选择的TextBox。

单选按钮

RadioButton

的DropDownList

<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>

jQuery代码

<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>

我想从$('.userSelection').on('change', function () { //alert($(this).val()); //if ($(this).val() === "Employee") { $("#textBoxOtherUser").toggle(); $("#dropDownUserNames").toggle(); //} });中选择TextBoxOtherUser后隐藏Employee，当我点击RadioButton选项时，我试图隐藏DropDownUserNames Other User。

RadioButton按预期执行。但是，在从浏览器中执行toggle()时，从Inspect Element中选择Other User时，我发现RadioButton没有被删除。事实上，我发现当未选择DropDownList时，代码中会出现Employee。另一方面，当选择style="display: inline-block;"时，会显示Employee。换句话说，选择style="display: none;"会在所需的用户界面中显示Employee。但是，如果未选择DropDownList，则Employee将以普通旧块格式显示，而不是被禁用。

怎么办？

Answer 1

使用data属性可以执行此操作..为员工和其他用户无线电输入添加data-user并将data-show添加到相关的选择/文本框中，然后您可以使用下一个代码

$('[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>

注意：如果在包含jquery之前包含js代码，则需要将js代码包装在$(document).ready(function(){ // code here })
中

最后，如果您需要隐藏整个row，只需剪切 /将data-show属性粘贴到父级而不是选择或文本框

$('[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之间的可见性？

1 个答案: