Redacted/Updatable Fields (toggle)

by Town

HTML

<input type="text" data-redacted-value="The redacted text" disabled="disabled" /><div class="redacted ryes" title="This field has a redacted value - click here to clear it">R</div>

<input id="submit" type="submit" value="Save Changes" />

CSS

input { float: left;}
.redacted {width: 20px; height: 20px; color: #fff; font-weight: bold; text-align: center; float: left; position: relative; top: 3px; cursor: pointer;}
#submit {clear: both;}

.ryes {background: #000;}
.rno { background: #ccc;}

JavaScript

$(function() {
    
    var textbox = $('input:text');
    
    $('.redacted').click(function() {
        $(this).toggleClass("ryes rno");
        var jstb = $(textbox)[0];
        jstb.disabled = !jstb.disabled;
        jstb.value = ""; // clear the value (desired or not?)
        
        // TODO: update tooltip with correct message for re-enabling redacted value
    });

    $('#submit').click(function() {
        alert("The following value will be saved: " + 
              ($(textbox).attr('disabled') !== undefined ? $(textbox).data('redacted-value') : $(textbox).val()));
    });
});