How to disable & enable all contents of a Div

Question

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);
    }

disable? what do you mean. It's only input fields who support this attribute. You can hide the div instead. — Tommy Bjerregaard, Mar 06 '13 at 12:54
I'm pretty sure that `` 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, Mar 06 '13 at 12:55
@TommySorensen, I dont want to hide, Yes I can fadeto it but I want it to be away from clicking. — Dhwani, Mar 06 '13 at 12:56
@djIT By default nothing happens when you click a div. Does anything happen when you click it now? — qwerty, Mar 06 '13 at 12:57
Do we all know the difference between properties and attributes? Why are we changing the attributes in places when properties will do? it is slower and puts you in a bind if you ever need state data. — rlemon, Mar 06 '13 at 14:16

Tommy Bjerregaard · Answer 1 · 2013-03-06T13:27:19.693

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');
}

edited Mar 06 '13 at 13:27

answered Mar 06 '13 at 12:57

Tommy Bjerregaard

1,089
11
24

Yes the cursor is still a pointer but when you click nothing should happend – Tommy Bjerregaard Mar 06 '13 at 13:12
It is happening that's the problem. – Dhwani Mar 06 '13 at 13:15
Then your are not running the code the correct place. Can you please give us more information about how you code looks like? – Tommy Bjerregaard Mar 06 '13 at 13:17
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/25694/discussion-between-tommysorensen-and-djit) – Tommy Bjerregaard Mar 06 '13 at 13:21

IT ppl · Accepted Answer · 2013-03-06T13:30:23.213

2

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

edited Mar 06 '13 at 13:30

answered Mar 06 '13 at 13:17

IT ppl

2,626
1
39
56

score 0 · Answer 3 · answered Mar 06 '13 at 13:00

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

score 0 · Answer 4 · answered Mar 06 '13 at 13:00

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

steo · Answer 5 · 2013-03-06T13:16:59.163

0

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.

edited Mar 06 '13 at 13:16

answered Mar 06 '13 at 13:06

steo

4,586
2
33
64

I want a toggle type of effect. Enable & Disable. – Dhwani Mar 06 '13 at 13:09
Explain better. When do you want to fire this event? We can answer you better. – steo Mar 06 '13 at 13:12
I want to just disable clicking of links. – Dhwani Mar 06 '13 at 13:14
dude , you posted only some input, neither the anchors , we don't know when you're gonna fire the code, neither where. – steo Mar 06 '13 at 13:43

score 0 · Answer 6 · answered Mar 06 '13 at 13:56

0

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

answered Mar 06 '13 at 13:56

Dmytro Filipenko

861
1
9
25

What do you mean, nothing working, i just see, all done. I made base for your, you can change this code for your own purpose. Just click "Run with JS" and open Console tab to see reaction – Dmytro Filipenko Mar 06 '13 at 14:07
It is giving me worning: Line 1: var state = 'enable'; --- Unexpected ' '. – Dhwani Mar 06 '13 at 14:18
http://jsfiddle.net/Cd9TV/ maybe on resource its better to see my script in action – Dmytro Filipenko Mar 06 '13 at 20:49

How to disable & enable all contents of a Div

6 Answers6