JSFiddle - React, Tailwind, and code Playground

by King Shrestha

HTML

<display:table name="loadData" style="float:left;">
    <display:column title="User Defined" class="colId">
    <input type="text" value= "" name="userdefined" size="10" readonly="readonly"/>
    </display:column>
</display:table>
<input type="button" value="Make Editable" class="makeEditable" />
<input type="button" value="makeNonEditable" class="makeNonEditable" />

JavaScript

$(document).ready(function(){
    $(".makeEditable").click(function(){
        $('input:text').removeAttr("readonly");    
});
    $(".makeNonEditable").click(function(){
        $('input:text').attr("readonly", "readonly");    
    });               
})