javascript - 根据单选按钮值禁用输入字段/div

Question

I 我正在根据用户 Angular 色显示和禁用字段。我通过两个选项 admin 和 user 的基本单选按钮确定用户 Angular 色。管理员可以禁用所有文本框字段和按钮单击。问题是:当管理员禁用这些字段时，他们也无法在文本框中输入内容或拖动 div。管理员如何才能仅为用户禁用这些字段？

如果我单击单选按钮 admin，然后单击按钮禁用字段，管理员仍然可以在文本框中键入并拖动 div，但一旦我切换到单选按钮 user 我想禁用所有字段。一旦管理员启用字段，然后切换回单选按钮用户还可以在文本框中键入并拖动 div。

jQuery:

/** Determine user role**/

$('input[type="radio"]').click(function(){
    if($(this).attr("value")=="admin"){
        $("#adminControls").show();
    }
    if($(this).attr("value")=="user"){
        $("#adminControls").hide();
    }
 });

/** Disable fields **/

var clickCount = 0; 
$('#adminControl1').click(function (e) {
    clickCount ++;
    console.log(clickCount);
    if (clickCount % 2 == 1){
        $("#appendText").prop( "disabled", true );
        $("#divText").prop( "disabled", true );
        $('.draggable').draggable( "disable" );
        $("#adminControl1").val("Enable All");

    } else {
        $("#appendText").prop( "disabled", false );
        $("#divText").prop( "disabled", false );
        $('.draggable').draggable( "enable" );
        $("#adminControl1").val("Disable All");  
    }
});

HTML:

<h3>User Role:</h3>
<div id="roles">
    <label><input type="radio" name="userRole" value="admin"> Admin</label>
    <label><input type="radio" name="userRole" value="user" checked="checked"> User</label>
</div>
<br/>
<br/>

<div id="adminControls">
    <h3>Admin Controls</h3>
    <input type="button" id="adminControl1" value="Disable All" />
</div>
<br/>

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

* 编辑 *

var clickCount = 0; 
$('input[type="radio"]').click(function(){
    clickCount ++;
    if($(this).attr("value")=="admin"){
        $("#adminControls").show();
        $('#adminControl1').click(function (e) {
            if (clickCount % 2 == 1){
            $("#appendText").prop( "disabled", true );
            $("#divText").prop( "disabled", true );
            $('.draggable').draggable( "disable" );
            $("#adminControl1").val("Enable All");
            }
        });
    }
    if($(this).attr("value")=="user"){
        $("#adminControls").hide();
            $("#appendText").prop( "disabled", false );
            $("#divText").prop( "disabled", false );
            $('.draggable').draggable( "enable" );
            $("#adminControl1").val("Disable All");  
    }
 });

Answer 1

不要更改另一个事件绑定(bind)内的事件绑定(bind)。由于您尚未删除旧的事件绑定(bind)，因此您最终会为同一事件运行多个处理程序。您应该将启用/禁用按钮的点击处理程序放在顶层。

对于二元选项，请使用 bool 值，而不是计数器，您可以使用 disable = !disable 进行切换。您还应该在启用/禁用按钮的点击处理程序中切换它，而不是单选按钮。

var disable = true;
$('#adminControl1').click(function (e) {
    $("#appendText, #divText").prop("disabled", disable);
    $('.draggable').draggable(disable ? "disable" : "enable");
    $("#adminControl1").val(disable ? "Enable All" : "Disable All");
    disable = !disable;
});

单击单选按钮不应启用或禁用任何内容，它应该只是根据单击的按钮隐藏或显示管理控件。由于这两个选择是互斥的，因此无需测试每个值，因此我将其更改为使用 toggle，并使用指定所需状态的参数。

$('input[type="radio"]').click(function () {
    $("#adminControls").toggle($(this).attr("value") == "admin");
});

Updated fiddle

更新:

在此版本中，启用/禁用按钮只是切换 disable 变量和按钮的标签，它实际上并没有启用或禁用任何内容。单选按钮单击处理程序在切换到用户模式时检查变量的值，并相应地启用/禁用控件。当它切换到管理模式时，它会启用一切。

var disable = false;
$('#adminControl1').click(function (e) {
    disable = !disable;
    $("#adminControl1").val(disable ? "Enable All" : "Disable All");
});

$('input[type="radio"]').click(function () {
    if ($(this).attr("value") == "admin") {
        var tempdisable = false; // Everything is enabled for admin
        var adminmode = true;
    } else {
        tempdisable = disable; // Use the setting that admin assigned
        adminmode = false;
    }
    $("#adminControls").toggle(adminmode);
    $("#appendText, #divText").prop("disabled", tempdisable);
    $('.draggable').draggable(tempdisable ? "disable" : "enable");

});

FIDDLE