如何禁用其他分区，当我在一个DIV点击

Question

我有两个div所谓的“是”和“否”

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

与一个隐藏的输入

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

，现在当我点击在“是”div，然后“否”div将被禁用，反之亦然。 可点击的值将被分配到隐藏的输入值。现在的问题是，当我点击“否”div它不会改变任何东西，“是”div没有禁用。请任何人帮助我。 我正在尝试以下代码。

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

Answer 1

以下是你可以做的DEMO。

请注意，这只会工作一次，它会隐藏div。您还必须更改您的ID以符合您的问题。

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

Answer 2

实际上，div不能被禁用。

这是按钮或输入字段的属性。但是，您可以尝试隐藏它或将其样式更改为禁用。但是不能将disabled属性添加到div。

下面是该代码的示例。

<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将以这种方式处理。

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

这将检查元素的id，然后根据条件更改UI。它会隐藏另一个按钮。

Answer 3

其实你无法禁用div的，所以你可能需要改变你的代码一点点：

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

给它的样式：

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

，然后用这个jQuery代码：

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

那里你去，你只是禁用你的div。

Answer 4

Well Div不是输入元素，因此您不能禁用它。但是，无论如何，你可以做一个把戏，让它感觉像被禁用。 在CSS中创建类，这将使元素看起来像在灰色背景和白色文本颜色的帮助下被禁用。如果用户点击否，则将该类应用于是Div，反之亦然。然后你可以右边几个JavaScript行，这将限制禁用div的点击操作。你可以识别基于你的类的残疾div ...我希望这使得一些sence :)

例如在您的CSS文件中创建类如下。

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

这样做之后，下一步将是这个类适用于任何一个你想要的用户操作的基础上，一个div。

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

确保您在每次新鲜负载时从两个Div中移除此类。

Answer 5

你将可能尝试这个例子：

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> 

脚本

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

Answer 6

使用这个脚本

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

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

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