时间戳

首页 > 解决方案 > 如何根据在列表视图中选中或未选中的复选框隐藏更改的下拉列表？

jquery - 如何根据在列表视图中选中或未选中的复选框隐藏更改的下拉列表？

问题描述

我正在创建一个网页并有一个显示属性的列表视图。我有一个激活/停用复选框。根据复选框是否被选中，我需要隐藏并显示我的下拉列表。

我尝试了一些选项，但结果只出现在所有隐藏或显示的下拉列表中。

<asp:ListView ID="listview_recent" runat="server" ItemContainerID="layoutTemplate" ItemPlaceholderID="items" GroupItemCount="3" GroupPlaceholderID="groups">
  <LayoutTemplate>
    <asp:PlaceHolder ID="groups" runat="server"></asp:PlaceHolder>
  </LayoutTemplate>
  <GroupTemplate>
    <tr>
      <asp:PlaceHolder runat="server" ID="items"></asp:PlaceHolder>
    </tr>
  </GroupTemplate>
  <ItemTemplate>
    <div>
      <ul>
        <li class="check">Active<input ID="chkbx_active" type="checkbox" value='<%# Eval("idtbl_property") %>' <%# Convert.ToBoolean(Eval( "active")) ? "checked" : "" %>></li>
        <li class="ddl">
          <asp:DropDownList ID="ddl_Reason" runat="server" OnInit="ddl_Reason_Init"></asp:DropDownList>
        </li>
      </ul>
    </div>
  </ItemTemplate>

<script>
$("[id*= chkbx_active]").click(function() {

  var active = null;
  if ($(this).is(':checked')) {

    // $("[id*= ddl_Reason]").hide();
    //row.find("[id*= chkbx_active]").show = false;

    active = true;
  } else {
    //$("[id*= chkbx_active]").next().show();
    //$("[id*= ddl_Reason]").show();
    active = false;
    $("[id*= ddl_Reason]").show();
  }
})

$("[id*= ddl_Reason]").on("change", function() {
  var user = $("[id*= hdnUser]").attr('value');
  var id = $("[id*= chkbx_active]").attr('value');
  var reason = $('[id*= ddl_Reason] option:selected').attr('value');

  $.ajax({
    type: "POST",
    url: "/webservices/switchOffProperty.asmx/GetReasonVal",
    data: '{property:' + id + ',reason:' + reason + ',userid:' + user + '}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) {
      alert("Thank you for providing your input");
      $("[id*= ddl_Reason]").hide();
    }
  }).fail(function(error) {
    alert(error.StatusText);
  })

});
</script>

根据复选框是否被选中，我需要隐藏并显示我的下拉列表。

标签： jqueryhtmlasp.net

解决方案

由于它们在自己的 中<ul>，因此您可以找到最接近的 ul，然后在该特定 ul 中找到下拉列表。

像这样：

$("[id*= chkbx_active]").click(function () {
    var active = null,
        $checkbox = $(this),
        $dropdown = $checkbox.closest('ul').find('[id*= ddl_Reason]');


    if ($checkbox.is(':checked')) {
        $dropdown.hide();
        active = true;
    }
    else {
        $dropdown.show();
        active = false;
    }
})

推荐阅读