Javascript 基于单选按钮值禁用输入字段/div

我正在根据用户角色显示和禁用字段。我通过两个选项的基本单选按钮确定用户角色

admin

和

user

。管理员可以禁用所有文本框字段和按钮单击。问题是：当管理员禁用这些字段时，它们也会被锁定，无法在文本框中键入或拖动div。管理员如何才能仅为用户禁用这些字段

如果我单击单选按钮

admin

，然后单击按钮禁用字段，管理员仍然可以在文本框中键入并拖动div，但一旦切换到单选按钮

user

，我想禁用所有字段。管理员启用字段后，切换回单选按钮

user

也可以在文本框中键入并拖动div

jQuery:

HTML:

---

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

对于二进制选项，请使用布尔值，而不是计数器，您可以使用

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

单击单选按钮不应启用或禁用任何内容，它只应根据单击的按钮隐藏或显示管理控件。由于这两个选项是互斥的，因此无需对每个值进行测试，因此我将其更改为使用

切换

，并使用一个参数指定所需的状态

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

更新：

在这个版本中，启用/禁用按钮只是切换

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");

});

---

只需将代码放入单选按钮单击处理程序中，即可为不同的角色执行所需的操作。问题是什么？您还可以在该函数中设置一个变量，说明您是处于用户模式还是管理模式。然后按钮点击处理程序可以执行任何适合当前角色的操作。@Barmar我正在尝试，但不确定我是否理解这个概念。无法让它工作。展示你所尝试的。这样你就会从你做错的事情中吸取教训。复制别人的代码并不能让你学到任何东西。把代码放在问题中，请确认我现在使用的是二进制选项和切换。当选择admin单选时单击disable（禁用）按钮时，它仍在禁用admin（管理员）字段。它应该只对用户禁用。

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

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

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");

});