Disabling input fields/divs based on radio button value

Question

I I am displaying and disabling fields based on user roles. I determine the user role through a basic radio button of two options admin and user. The admin has the ability to disable all textbox fields and button clicks. The problem: when the admin disables the fields, their also locked out from being able to type in the textbox or drag a div. How would it be possible for the admin to disable the fields only for the user?

If I click on radio button admin and then click button to disable fields, the admin can still type in text box and drag div but once I switch to radio button user I want to disable all fields. Once the admin enables fields then switching back to radio button user can also type in text box and drag divs.

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>

* Edit *

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

Don't change the event binding inside another event binding. Since you haven't removed the old event binding, you end up running multiple handlers for the same event. You should put the click handler for the enable/disable button at top level.

For a binary option, use a boolean value, not a counter, which you can toggle with disable = !disable. You should also toggle it in the click handler for the enable/disable button, not the radio button.

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

Clicking on the radio button shouldn't enable or disable anything, it should just hide or show the admin controls depending on which button was clicked. Since the two choices are mutually exclusive, there's no need to test for each value, so I've changed it to use toggle, with an argument that specifies the desired state.

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

Updated fiddle

UPDATE:

In this version, the enable/disable button just toggles the disable variable and the label of the button, it doesn't actually enable or disable anything. The radio button click handler checks the value of the variable when it's switching into user mode, and enables/disables the controls accordingly. When it's switching into admin mode, it enables everything.

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