javascript - How to disable & enable all contents of a Div - Stack Overflow

admin管理员组

文章数量:1402788

I am trying to disable all elements of Div tag. I get success on input types. But not able to disable links. I have also tried this, but it is not working. Here is the code I have tried(But it works for input only):

 $('#EditorRows *').attr('disabled', true);

I know disable for input types but I want to achieve that type of mechanism for links.

1st PartialView Code:

<div id="Part2">
<div id="EditorRows">
<%= Html.ActionLink("Add another...", "Add", null, new { id = "addItem" }) %>
<%Html.RenderPartial("_InsertServices", Model);%>
</div>
<div id="DontAppend">
<input type="button" id="btnEdit" value="Edit" hidden="hidden"/>
<input type="button" id="btnDone" value="Done" />
</div>
</div>

2nd PartialView

<div class="EditorRow">
<% using (Html.BeginCollectionItem("services"))
{ %>
<table id="table1">
<tr><td>
NOS:</td><td>
<%:Html.DropDownListFor(model=>model.Id,(SelectList)ViewData["crmServiceType"] as SelectList,"---")%>
</td>
<td>
Comment:</td><td>
<%=Html.TextBoxFor(model => model.Comment, new { size = "20" })%></td>
<td>
<a href="#" class="deleteRow">delete</a>
</td>
</tr>
</table>
<% } %>
</div>

script:

    $("#addItem").click(function () {
            $.ajax({
                url: this.href,
                cache: false,
                success: function (html) { $("#EditorRows").append(html); }
            });
            return false;
        });

        $("a.deleteRow").live("click", function () {
            $(this).parents("div.EditorRow:first").remove();
            return false;
        });

$('#btnDone').click(function () {
      $('#EditorRows *').attr('disabled', true);
    }
    $('#btnEdit').click(function () {
      $('#EditorRows *').attr('disabled', false);
    }

I am trying to disable all elements of Div tag. I get success on input types. But not able to disable links. I have also tried this, but it is not working. Here is the code I have tried(But it works for input only):

 $('#EditorRows *').attr('disabled', true);

I know disable for input types but I want to achieve that type of mechanism for links.

1st PartialView Code:

<div id="Part2">
<div id="EditorRows">
<%= Html.ActionLink("Add another...", "Add", null, new { id = "addItem" }) %>
<%Html.RenderPartial("_InsertServices", Model);%>
</div>
<div id="DontAppend">
<input type="button" id="btnEdit" value="Edit" hidden="hidden"/>
<input type="button" id="btnDone" value="Done" />
</div>
</div>

2nd PartialView

<div class="EditorRow">
<% using (Html.BeginCollectionItem("services"))
{ %>
<table id="table1">
<tr><td>
NOS:</td><td>
<%:Html.DropDownListFor(model=>model.Id,(SelectList)ViewData["crmServiceType"] as SelectList,"---")%>
</td>
<td>
Comment:</td><td>
<%=Html.TextBoxFor(model => model.Comment, new { size = "20" })%></td>
<td>
<a href="#" class="deleteRow">delete</a>
</td>
</tr>
</table>
<% } %>
</div>

script:

    $("#addItem").click(function () {
            $.ajax({
                url: this.href,
                cache: false,
                success: function (html) { $("#EditorRows").append(html); }
            });
            return false;
        });

        $("a.deleteRow").live("click", function () {
            $(this).parents("div.EditorRow:first").remove();
            return false;
        });

$('#btnDone').click(function () {
      $('#EditorRows *').attr('disabled', true);
    }
    $('#btnEdit').click(function () {
      $('#EditorRows *').attr('disabled', false);
    }

• javascript
• jquery
• html
• asp-mvc

Share Improve this question Follow edited May 23, 2017 at 12:27 CommunityBot 111 silver badge asked Mar 6, 2013 at 12:53 DhwaniDhwani 7,6281818 gold badges8181 silver badges143143 bronze badges 10

• disable? what do you mean. It's only input fields who support this attribute. You can hide the div instead. – Tommy Bjerregaard Commented Mar 6, 2013 at 12:54
• I'm pretty sure that <a> elements don't have a disabled property, but I might be wrong. Do you want to grey them out, have nothing happen when you click them, hide them or something else? – h2ooooooo Commented Mar 6, 2013 at 12:55
• @h2ooooooo, i want that nothing happen when I click on it. – Dhwani Commented Mar 6, 2013 at 12:56
• then make cursor :none – supersaiyan Commented Mar 6, 2013 at 12:56
• @TommySorensen, I dont want to hide, Yes I can fadeto it but I want it to be away from clicking. – Dhwani Commented Mar 6, 2013 at 12:56

 |  Show 5 more ments

6 Answers 6

Sorted by: Reset to default 3

To disable links use this

$('div a').unbind('click');

Ore in your case:

$('#btnDone').click(function () {
    var $rows = $('#EditorRows');
    $rows.find('input, select, textarea').attr('disabled', true);
    $rows.find('a').unbind('click');
}

try this

$('#EditorRows').find('a').each(function(){
   $(this).replaceWith($(this).text());
});

Update

To disable :

$('#EditorRows').find('a').bind('click', false);

To enable :

$('#EditorRows').find('a').unbind('click', false);

$('div').find(':input').prop('disabled',true);//this line will this able all inputs including buttons.
$('div').find('a').each(function(){
   $(this).removeAttr('href');
   $(this).unbind('click');
});//this will take care of the links

I think this will take care of the problem

use off method of jquery.

$('#Yourdiv a').off('click');

$('#yourDiv').find('input').attr('disabled',true);

or else simple is just return false when anchor clicked.

$('#Yourdiv a').on('click',function(e)
                  {
                   return false;  // or e.preventDefault();
                  });

It works for input only because they have disable attribute. To disable link try

if you want just to delete the link redirect.

$("#youdivname").find('a').removeAttr('href') 

This will active it again :

$("#yourdivname").find('a').attr('href','link')

where link is the redirect.

The first solution that came to mind, but it does not pretend to be elegant http://jsbin./icijox/4/edit

本文标签： javascriptHow to disable amp enable all contents of a DivStack Overflow