JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<input type="checkbox" class="cb" checked>顯示</input><br/>
<div class="c">
    身高：<input type="text" ></input><br/>
    體重：<input type="text" ></input>
    <div class="b">鎖定</div>
</div>

CSS

.b{border:1px solid #555;width:60px;height:20px;text-align:center;}

JavaScript

/*To 阿漢*/

$(function(){
    $(".cb").bind("click",function(){
        view($(this)[0]);
    });
    view($(".cb")[0]);
    
    $(".b").bind("click",function(){
       block($(".c input").attr('readonly'),this);
    }); 
    
});

/*顯示*/
function view(sender){
    if(sender.checked)
        $(".c") .show("fast");
    else
        $(".c") .hide("fast");   
}

/*鎖定*/
function block(boo,sender){
    if (! boo){
        $(".c input").attr('readonly',true).css("background","#ccc");
        $(sender).html("解鎖");  
    }  
    else{
        $(".c input").attr('readonly',false).css("background","");
        $(sender).html("鎖定");  
    }
}