XFDcloser form

Proposed design for XFDcloser input form.

HTML

<div style="border:1px solid #202020; padding:0.5em; max-width:52em;">
  <div style="float:left; width:99%; padding-bottom:1%;" id="closeXFD-resultContainer"><strong style="margin-right: 2em;">Result</strong> <span style="white-space:nowrap;">(&thinsp;<label for="closeXFD-speedy">Speedy:</label><input type="checkbox" name="closeXFD-speedy" id="closeXFD-speedy" />&thinsp;)</span>
    <br/>
    <span class="closeXFD-option"><input type="radio" name="closeXFD-result" class="closeXFD-keepResult" id="closeXFD-result-keep"  /><label for="closeXFD-result-keep">Keep</label></span>
    <span class="closeXFD-option"><input type="radio" name="closeXFD-result" class="closeXFD-keepResult" id="closeXFD-result-redir" /><label for="closeXFD-result-redir">Redirect</label></span>
    <span class="closeXFD-option"><input type="radio" name="closeXFD-result" class="closeXFD-keepResult" id="closeXFD-result-nocon" /><label for="closeXFD-result-nocon">No consensus</label></span>
    <span class="closeXFD-option"><input type="radio" name="closeXFD-result" id="closeXFD-result-merge" /><label for="closeXFD-result-merge">Merge</label></span>
    <span class="closeXFD-option"><input type="radio" name="closeXFD-result" class="closeXFD-deleteResult" id="closeXFD-result-delete"  /><label for="closeXFD-result-delete">Delete</label></span>
    <span class="closeXFD-option" id="closeXFD-resultContainer-softdel"><input type="radio" name="closeXFD-result" class="closeXFD-deleteResult" id="closeXFD-result-softdel" /><label for="closeXFD-result-softdel">Soft delete</label></span>
    <span class="closeXFD-option"><input type="radio" name="closeXFD-result" id="closeXFD-result-custom" /><label for="closeXFD-result-custom">Custom</label></span>
    <p id="closeXFD-closetype-notes"></p>
  </div>
  <div style="clear:both;padding-bottom:1%;" id="closeXFD-result-custom-div" class="closeXFD-visibleFor-customResult">
    <label for="closeXFD-result-custom-input">Custom result:</label>
    <input type="text"...

JavaScript

//testing:
var xfd_type, isSysop;
xfd_type = "tfd";
isSysop = false;

//Style classes
$('span.closeXFD-option').css({
  "white-space": "nowrap",
  "width": "8em",
  "margin-right": "0.3em",
  "display": "block",
  "float": "left"
}).after("<wbr>");

//Hide fields only available for certain results
$('.closeXFD-visibleFor-keepResult, .closeXFD-visibleFor-deleteResult, .closeXFD-visibleFor-mergeResult, .closeXFD-visibleFor-customResult').hide();

if (xfd_type !== "tfd") {
  $(".closeXFD-TFD-only").remove();
}
if (isSysop) {
  $(".closeXFD-nonSysop-only").remove();
} else {
  $(".closeXFD-sysop-only").remove();
}


//On clicking a result, hide & clear fields not for that result, and show fields that are for that result
$('#closeXFD-resultContainer').click(function() {
  if ($('#closeXFD-result-keep').prop('checked') || $('#closeXFD-result-redir').prop('checked') || $('#closeXFD-result-nocon').prop('checked')) {
    //Keep-type result
    $('.closeXFD-visibleFor-deleteResult, .closeXFD-visibleFor-mergeResult, .closeXFD-visibleFor-customResult').not('.closeXFD-visibleFor-keepResult').hide().find('input').prop('checked', false).val('');
    $('.closeXFD-visibleFor-keepResult').show();
  } else if ($('#closeXFD-result-merge').prop('checked')) {
    //Merge result
    $('.closeXFD-visibleFor-deleteResult, .closeXFD-visibleFor-keepResult, .closeXFD-visibleFor-customResult').not('.closeXFD-visibleFor-mergeResult').hide().find('input').prop('checked', false).val('');
    $('.closeXFD-visibleFor-mergeResult').show();
  } else if ($('#closeXFD-result-custom').prop('checked')) {
    //Custom result
    $('.closeXFD-visibleFor-deleteResult, .closeXFD-visibleFor-keepResult, .closeXFD-visibleFor-mergeResult').not('.closeXFD-visibleFor-customResult').hide().find('input').prop('checked', false).val('');
    $('.closeXFD-visibleFor-customResult').show();
  } else if ($('#closeXFD-result-delete').prop('checked') || $('#closeXFD-result-softdel').prop('checked')) {
    //Delete-type...