Блог

Я создаю веб-страницу, и в listview отображаются свойства. У меня есть флажок активировать / деактивировать. В зависимости от того, установлен флажок или нет, мне нужно скрыть и показать свой выпадающий список.

Я попробовал несколько вариантов, но результат приходит только ко всем выпадающим спискам, скрывающим или отображающим.

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

В зависимости от того, установлен флажок или нет, мне нужно скрыть и показать свой выпадающий список.

Поскольку они находятся в своем собственном <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;
    }
})