prop（）は無効にするのではなく、自分のボタンを隠す

Question

prop jQueryの構文を使用して保存ボタンを有効にし、編集ボタンをクリックした後に編集ボタンをクリックしたときに、保存ボタンを有効にします。あなたは `それいけない` $（ '＃のsaveProject.visible'）式の誤差がある場合があります

$(document).ready(function() { 
 
    $('#saveProject').click(function() { 
 
    $('#editProject').prop("disabled", false); 
 
    $('#saveProject').prop("disabled", true); 
 
    $('.fields').prop("disabled", true); 
 
    $('.fields').css({ 
 
     "border-bottom": "4px solid teal" 
 
    }); 
 
    }); 
 

 
    $('#editProject').click(function() { 
 
    $('#saveProject').prop("disabled", false); 
 
    $('.fields').prop("disabled", false); 
 
    $('.green').css({ 
 
     "border-bottom": "4px solid green" 
 
    }); 
 
    $('.red').css({ 
 
     "border-bottom": "4px solid red" 
 
    }); 
 
    $('#editProject').prop("disabled", true); 
 
    }); 
 

 
    $('#clearProject').click(function() { 
 
    $('#clearProject').prop("disabled", false); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="w3-red"> 
 
    <input id="saveProject" type="submit" class="w3-button w3-right w3-col m3" style="background-color:#030066;" value="Save Project" disabled="disabled"> 
 
    <input id="editProject" class="w3-button w3-right w3-rightbar w3-col m2" style="background-color:#030066;" value="Edit"> 
 
    <input id="clearProject" class="w3-button w3-right w3-rightbar w3-col m4" style="background-color:#030066;" value="Default Values" type="reset"> 
 
</div>

Answer 1

CSSの修正

.w3-button { 
    background-color: #030066; 
    color: #fff; 
    cursor: pointer; 
} 

.w3-button[disabled] { 
    background-color: #eee; 
    color: #888; 
    cursor: not-allowed !important; 
} 

とHTML

<input id="editProject" class="w3-button w3-right w3-rightbar w3-col m2" value="Edit" 
type="button">