Question

我目前正在使用Jquery来操作html元素。目前我只使用div，textarea和两个按钮。对于这个问题：我有一个管理按钮id="adminControl"，我想发布一个clickevent来禁用textearea，按钮id="#appendText"和div class="middle-side"。我尝试通过按住按钮点击id="adminControl"来执行上一步操作但没有禁用任何内容。我知道输入字段是可能的，但是可以使用div吗？ JSFIDDLE

Jquery的

var clickCount = 0;
$('#adminControl1').click(function (e) {
    clickCount ++;
    if (clickCount == 1){
        $( "#button" ).prop( "disabled", true );
        $( "#divText" ).prop( "disabled", true );
        $( "#adminControl1").value("Enable All");
    } else {
        $( "#button" ).prop( "disabled", false );
        $( "#divText" ).prop( "disabled", false );
        $( "#adminControl1").value("disable All");
        clickCount --;
    }
}

HTML

<textarea rows="4" cols="50" id="divText" placeholder="Enter Text Here!"></textarea> 
<input type="button" id="appendText" value="Add Div with Text" /><br/>

<div>
    <div class="middle-side empty">
        <h2 class="placeholder-title hidden">Place Inside Here</h2>
    </div>
</div>

<div id="adminArea">
    <h3>Admin Area</h3>
    <input type="button" id="adminControl1" value="Disable All" />
</div>

Answer 1

嘿，你在那里遇到了一些错误：

.value（）应为val（）
切换启用和禁用，使用mod计数，不要递减计数器
删除重复点击停用按钮
您忘了关闭括号
$（“＃button”）应该是$（“＃appendText”）

我更新了您的JSFiddle http://jsfiddle.net/hawaiianchimp/xdfq9hc3/2/

Answer 2

您只需要检查是否禁用了一个元素并执行以下操作：

$('#adminControl1').click(function (e) {

    if(!$("#appendText").prop("disabled")){
        $("#appendText, #divText, .middle-side empty").prop("disabled", true);
        $("#adminControl1").val("Enable All");
    }
    else{
        $("#appendText, #divText, .middle-side empty").prop("disabled", false);
        $("#adminControl1").val("Disabled All");
    }    
});

fiddle

Answer 3

使用val（）而不是value（）。这是工作代码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title></title>
    <meta name="" content="">
    </head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script>
        var clickCount = 0;
        $().ready(function(e){
            $('#adminControl1').click(function (e) {
        var clickCount= parseInt($("#counter").val());

        $("#counter").val(clickCount+1);
        if (clickCount == 1){
            $( "#button" ).prop( "disabled", true );
            $( "#divText" ).prop( "disabled", true );
            $( "#adminControl1").val("Enable All");
        } else {
            $( "#button" ).prop( "disabled", false );
            $( "#divText" ).prop( "disabled", false );
            $( "#adminControl1").val("disable All");
            clickCount --;
        }
    })
        })


    </script>
    <body>
    <form>
    <textarea rows="4" cols="50" id="divText" placeholder="Enter Text Here!"></textarea> 
    <input type="button" id="appendText" value="Add Div with Text" /><br/>
    <input type="text" id="counter" value="1" /><br/>

    <div>
        <div class="middle-side empty">
            <h2 class="placeholder-title hidden">Place Inside Here</h2>
        </div>
    </div>

    <div id="adminArea">
        <h3>Admin Area</h3>
        <input type="button" id="adminControl1" value="Disable All" />
    </div>
    </form>
    </body>
    </html>

在按钮单击事件上禁用html元素

3 个答案: