Change border-style for editable fields

Content

We have a requirement to make certain fields of type oj-input-text editable on click of a button. The field should have no border-style: none; when it is in readOnly state. On click of the button, the field border should change to border-style: solid;.

Have tried setting a variable using javascript and using that in the style property of the input text but it did not work.

JS code - 

PageModule.prototype.changeStyle = function(editFlag){
var style;

  if(editFlag)
  {
    style =  "border-style: solid;";
  }
  else
  {
    style = "border-style: none;";
  }
  return style;
  
}

Input Text component - 

      <oj-input-text value="{{ $variables.OrderResponse.CustomerPONumber }}" readonly="[[ $variables.EditFlag !== true]]" label-hint="Purchase Order" id="oj-input-text--1944217321-30" :style="[[ $variables.borderStyle ]]">