交換圖像以啓用/禁用DIV

我只是一個初學者。是否有代碼使用兩個不同的圖像作爲按鈕來禁用和啓用。大多數示例使用兩個單獨的按鈕，但我需要使用帶有兩個圖像的單個按鈕：一個用於關閉，另一個用於打開。交換圖像以啓用/禁用DIV

$(function() { 
 
     $("#Enable").click(function(){ 
 
     $(".div1 *").prop('disabled',true); 
 
    }); 
 
     
 
     $("#Disable").click(function(){ 
 
     $(".div1 *").prop('disabled',false); 
 
    }); 
 
    });

<!doctype html> 
 
    <html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <title>test</title> 
 
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
     <link href="css/multitoggle.css" rel="stylesheet" type="text/css" /> 
 
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
     <script language="javascript" type="text/javascript"></script> 
 
    </head> 
 
    
 
    <body> 
 
    <div class="div1"> 
 
      Name:<input type="text" id="fullname" value="name"/><br> 
 
     <br> 
 
      <input type="button" id="button1" value="Submit "/> 
 
     <div></div> 
 
     
 
    </div> 
 
    
 
    <input type="image" src="assets/trans_off.jpg" id="Enable" value="Enable"/> 
 
    <input type="image" src="assets/trans_on.jpg"id="Disable" value="Disable"/> 
 
    
 
    </body> 
 
    </html>

來源

2017-02-23 Arthur Ks

$（」。DIV1" ）隱藏（）。爲隱藏$（「。div1」）。show（）;爲顯示隱藏的div希望這可以幫助 – akhilsk

http://stackoverflow.com/documentation/jquery/389/selectors#t=201702231059237385042 – akhilsk

使用圖片精靈，它包含兩個按鈕圖像。使用background-position設置要顯示的圖像部分。

$(document).ready(function() { 
 
    var isDisabled = false; 
 

 
    $('.toggle').click(function() { 
 
    isDisabled = !isDisabled; // invert value 
 
    $('.div1 input').prop('disabled', isDisabled); 
 
    }); 
 
});

#button1 { 
 
    background: url('http://images.sixrevisions.com/2009/05/04-31_slick_clean_30.png') no-repeat -80px -14px; 
 
    width: 246px; 
 
    height: 48px; 
 
    border: none; 
 
} 
 

 
#button1:disabled { 
 
    background-position: -80px -63px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="div1"> 
 
    Name: <input type="text" id="fullname" value="name" /><br> 
 
    <br/> 
 
    <input type="button" id="button1"/> 
 
    <div></div> 
 

 
</div> 
 
<hr/> 
 
<button class="toggle">Toggle inputs</button>

來源

2017-02-23 11:01:28 Justinas

非常感謝。 –

@ArthurKs如果它回答你的問題，請接受答案 – Justinas

交換圖像以啓用/禁用DIV

回答

相關問題