Отключение полей ввода/разделов на основе значения переключателя

Question

I Я показываю и отключаю поля на основе ролей пользователей. Я определяю роль пользователя через базовую радиокнопку из двух вариантов: 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

UPDATE:

В этой версии, кнопка отключения/включения просто переключает 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