Question

I am creating a webpage and have a listview displaying properties. I have an activate/deactivate checkbox. Based on whether the checkbox is checked or not i need to hide and show my drop downlist.

I have tried a few options but the result only comes to all of the dropdownlists hiding or showing.

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

Based on whether the checkbox is checked or not i need to hide and show my drop downlist.

Answer 1

Since they are in their own <ul>, you can find the closest ul, then find the dropdown in that specific ul.

Like this:

$("[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;
    }
})

How do I hide the changed drop down list based on the checkbox being checked or not within a listview?

1 个答案: