My code is as follows. I want to enable the textarea field by clicking on the checkbox and deactivate the textarea field again by clicking checkbox .

How should I do this?

my js code :

if ($('#checkbox').prop('checked')) {
  $('#fldScript').attr('disabled', false);
} else {
  $('#fldScript').attr('disabled', true);
}

function Script() {

  var ua = navigator.userAgent;
  if (ua && ua.toUpperCase().indexOf("OPERA MINI") > -1) {
    return false;
  }
  var Script = CodeMirror.fromTextArea(document.getElementById("fldScript"), {
    mode: "text/javascript",
    tabMode: "indent",
    styleActiveline: true,
    htmlMode: true,
    lineWrapping: true,
    foldgutter: true,
    autoCloseTags: true,
    autoCloseBrackets: true,
    highlightSelectionMatches: true,
    smartIndent: false,
    extraKeys: {
      "Ctrl-Space": "autocomplete",
      "F11": function(cm) {
        cm.setOption("fullScreen", !cm.getOption("fullScreen"));
      },
      "Esc": function(cm) {
        if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
      }
    },
  });
  Script.on("change", function() {
    Script.save();
  });
  Script.on('dblclick', function() {
    if (Script.getOption("fullScreen") == false)
      Script.setOption("fullScreen", !Script.getOption("fullScreen"));
  });

}
Script();

my html code :

<input type="checkbox" id="checkbox" value="0"> checkbox
<br>
<br>
<textarea id="fldScript"></textarea>