JSFiddle - React, Tailwind, and code Playground

by jihoon kim

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<html>
 <head>
  <title> readonly </title>
 </head>
 <body>
change element readonly & disabled to double click~~!!
<pre>
    <b>bbbbb</b>
    <i>iiiii</i>
    <input type="text" name="aaaa">
    <select name="bbbb">
        <option value="" selected>
        <option value="">
    </select>
    <input type="radio" name="">
    <input type="checkbox" name="">
    <textarea name="ccc" rows="" cols="" ></textarea>
    <input type="reset">
    <input type="submit">
    <input type="password" name="">
    <input type="image" src="">
    <input type="button" value="" onclick="">

</pre>
 </body>
</html>

CSS

[readonly="readonly"] { background-color:#d7d7d7 }

JavaScript

//해당 Form 내역을 readOnly한다.
//사용법 : fn_SetReadonly($("#frmSearch"),false/true);
//      : fn_SetReadonly(sheetOtl,false/true);
function fn_SetReadonly(jObj,readonly) {
    //console.info( "jObj", jObj );
    if ( jObj.IBSheetVersion ) {// sheetOtl.IBSheetVersion
        jObj.SetEditable(!readonly);
    } else {
        jObj.each(function (i) {
            //console.info($(this),i,readonly);
            var tNm = $(this).prop("tagName").toLowerCase();
            //alert(tNm);
            //console.info(tNm);
            if ( this.nodeType == 1 ) { //elnode
                if ( tNm.indexOf('select') == -1 ) {
                    if ( this.childNodes ) {
                        //console.info("$(this.childNodes)", $(this.childNodes).find("input,select"));
                        fn_SetReadonly($(this.childNodes).find("input,select,textarea"),readonly);
                    }
                }
            }

            if ( tNm == 'form' ) return;
            var type = $(this).attr("type");
            if ( readonly ) {
                if ( tNm == 'input' || tNm == 'textarea' ) {
                    if (  type == 'radio' || type == 'checkbox' || type == 'button' || type == 'image' || type == 'reset'|| type == 'submit'  ) {
                        $(this).attr("disabled", "disabled");
                    } else {
                        $(this).attr("readonly",true);
                    }
                } else if ( tNm == 'select' ) {
                   $(this).attr("disabled", "disabled");
                } else if ( tNm == 'button' || ( tNm == 'span' && $(this).find("button") ) ) {
                   if ( tNm == 'button' ) {
                        $(this.parentNode).hide();
                   } else {
                        $(this).hide();
                   }
                } else {
                   $(this).attr("disabled", "disabled");
                }
            } else {
                if ( tNm == 'input' || tNm == 'textarea' ) {
                    if (...