Question

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

如果我单击单选按钮admin然后单击按钮以禁用字段，管理员仍然可以键入文本框并拖动div但是一旦我切换到单选按钮user我想要禁用所有领域。管理员启用字段后，切换回单选按钮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

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

对于二进制选项，请使用布尔值，而不是计数器，您可以使用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

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

1 个答案: