How can I disable other div when i click on one div

Question

I have two divs called "Yes" and "No"

<div id="object">
    <div class="object-content">
        I'd say
        <div class="confirm" id="btnYes" runat ="server" >Yes</div>
    </div>
    <div class="object-content" style="float: right">
        I'd say
        <div class="confirm" style="color: red"  id="btnNo" runat="server">No</div>
    </div>
</div>

And one hidden input

<input type="hidden" id="hdnYesNoAnswer" value="" name="hdnYesNoAnswer" runat="server" />

And now When I click on the "Yes" div then "No" div will be disable and vice versa . And the clickable value will be assigned into hidden input value . Now problem is , when i click on the "No" div it does not change anything and the "yes" div did not disable . please anyone help me . I am trying the following code .

<script>
       $(document).ready(function () {

           if ($('#<%=btnYes.ClientID %>').click(function () {
               $('#<%=btnYes.ClientID %>').html("Counted");
               $('#<%=btnNo.ClientID %>').disable();
               $('#<%=hdnYesNoAnswer.ClientID %>').val('1');
           }));
           else if($('#<%=btnNo.ClientID %>').click(function () {
               $('#<%=btnNo.ClientID %>').html("counted");
               $('#<%=btnYes.ClientID %>').disable();
               $('#<%=hdnYesNoAnswer.ClientID %>').val('0');
           }));
       });
</script>

What do you mean by disable? Do you want to hide the other `div`? — Niklas, Jun 18 '14 at 08:53
http://stackoverflow.com/questions/15555295/how-to-disable-div-element-and-everything-inside please check this out. — Runcorn, Jun 18 '14 at 08:55

Afzaal Ahmad Zeeshan · Answer 1 · 2014-06-18T10:14:32.687

Actually, div cannot be disabled.

That is a property of button or input field. However, you can try to hide it or change its style to look like disabled. But you cannot appened disabled attribute to a div.

Here is the example for that code.

<div id="object">
    <div class="object-content">
        I'd say
        <div class="confirm" id="btnYes">Yes</div>
    </div>
    <div class="object-content" style="float: right">
        I'd say
        <div class="confirm" style="color: red"  id="btnNo">No</div>
    </div>
</div>

jQuery would be handled this way.

$('div').click(function () {
   // jquery click handler for the div
   if($(this).attr('id') == 'btnYes') {
       // if yes was clicked!
       $('#btnNo').hide();
   } else {
       // no was clicked
       $('#btnYes').hide();
   }
}

This would check for the element's id and then change the UI depending on the condition. It would hide the other button.

@user3751277, have a look now. :) – Afzaal Ahmad Zeeshan Jun 18 '14 at 10:14 — Afzaal Ahmad Zeeshan, Jun 18 '14 at 10:14

score 0 · Answer 2 · answered Jun 18 '14 at 08:55

actually you can not disable divs, so you might need to change your code a little bit:

<div id="object">
    <div class="object-content">
        I'd say
        <div class="confirm" id="btnYes" runat ="server" >Yes</div>
        <div class="disable"></div>
    </div>
    <div class="object-content" style="float: right">
        I'd say
        <div class="confirm" style="color: red"  id="btnNo" runat="server">No</div>
        <div class="disable"></div>
    </div>
</div>

give it the style:

.disable{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    display:none;
    z-index:99;}

and then use this jQuery code:

<script>
   $(document).ready(function () {
       $('#btnYes, #btnNo').click(function(){
           $(this).parent().siblings('.object-content').children('.disable').css('display','block');
       });
   });
</script>

there you go, you just disabled your div.

score 0 · Answer 3 · answered Jun 18 '14 at 08:57

Well Div is not an input element hence you cannot disable that. But however you can do one trick to feel it like disabled. Create on class in CSS which will make element look like disabled with the help of gray background and white text color. If user clicks on No then apply that class to Yes Div and vice versa. You can then right few javascript lines too which will restrict the click actions on disabled divs. You can identify disabled div on the basis of your class... I hope this make some sence :)

for example create on class like following in your CSS file.

.disabledDiv{
 backgrund-color:gray;
 color : white;
}

After doing so, next step would be apply this class to a div whichever you want on the basis of user actions.

<script>
       $(document).ready(function () {

           if ($('#<%=btnYes.ClientID %>').click(function () {
              if($(this).hasClass("disabledDiv")) return false;
               $('#<%=btnYes.ClientID %>').html("Counted");
               $('#<%=btnNo.ClientID %>').addClass("disabledDiv");
               $('#<%=hdnYesNoAnswer.ClientID %>').val('1');
           }));
           else if($('#<%=btnNo.ClientID %>').click(function () {
              if($(this).hasClass("disabledDiv")) return false;
               $('#<%=btnNo.ClientID %>').html("counted");
               $('#<%=btnYes.ClientID %>').addClass("disabledDiv");
               $('#<%=hdnYesNoAnswer.ClientID %>').val('0');
           }));
       });
    </script>

Make sure you remove this class from both Divs on each fresh load.

score 0 · Accepted Answer · answered Jun 18 '14 at 08:58

Here's a DEMO on what you could do.

Note that this will only work once and it will hide the div. You would also have to change your id`s to match with your question.

<div id="object">
    <div class="object-content" style="float:left;">I'd say
        <div class="confirm" id="btnYes" runat="server">Yes</div>
    </div>
    <div class="object-content" style="float: right">I'd say
        <div class="confirm" style="color: red" id="btnNo" runat="server">No</div>
    </div>
    <input id="hdnYesNoAnswer"></input>
</div>

jQuery

$(document).ready(function () {

    if ($('#btnYes').click(function () {
        $('#btnYes').html("Counted");
        $('#btnNo').hide();
        $('#hdnYesNoAnswer').val('1');
    }));
    if ($('#btnNo').click(function () {
        $('#btnNo').html("counted");
        $('#btnYes').hide();
        $('#hdnYesNoAnswer').val('0');
    }));
});

score 0 · Answer 5 · answered Jun 18 '14 at 09:20

You would possibly try this example:

html

<div id="object">
    <div class="object-content enabled">
        I'd say
        <div class="confirm" id="btnYes" runat ="server" >Yes</div>
    </div>
    <div class="object-content right disabled">
        I'd say
        <div class="confirm" style="color: red"  id="btnNo" runat="server">No</div>
    </div>
    <input type="hidden" id="hdnYesNoAnswer"/>
</div>

script

$(function()
{
    $(".object-content").on('click', function()
    {
        if($(this).hasClass("disabled"))
        {
            return;
        }
        $(".object-content").toggleClass("disabled", "enabled");
        var id = $(this).find(".confirm").eq(0).prop("id");
        var v = "btnNo" === id ? '0' : '1';
        $("#hdnYesNoAnswer").val(v);
    });
});

Lucky W · Answer 6 · 2014-06-18T09:40:27.307

0

Use this Script

$(".confirm").on("click",function(){

        $(".confirm").removeClass("disabledDiv");
        if($(this).attr("id")== "btnNo")
        {
            $("#btnYes").addClass("disabledDiv");
        }else if($(this).attr("id")== "btnYes")
        {

            $("#btnNo").addClass("disabledDiv");
        }
});

edited Jun 18 '14 at 09:40

answered Jun 18 '14 at 09:29

Lucky W

50
1
7

How can I disable other div when i click on one div

6 Answers6