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时，“No”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

实际上，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 2

实际上你无法禁用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 3

Div Div不是输入元素，因此您无法禁用它。但是，你可以做一个技巧，让它感觉像残疾人。在CSS中创建类，在灰色背景和白色文本颜色的帮助下使元素看起来像禁用。如果用户单击否，则将该类应用于Yes Div，反之亦然。然后你可以对几行javascript行进行限制，这将限制对禁用的div的点击操作。你可以根据你的班级确定残疾人士的div ...我希望这能有所作为：）

例如在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 4

在这里你可以做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 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");
        }
});

当我点击一个div时，如何禁用其他div

6 个答案: