DIVの有効/無効を切り替える画像

私は初心者です。 2つの異なる画像を無効にして有効にするボタンとして使用するコードはありますか？ほとんどの例では、別々のボタンを2つ使用していますが、オフとオフの2つのイメージを持つ単一のボタンを使用する必要があります。 2枚のボタン画像が含まれてい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" ）（非表示）。 hide $（ "。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の有効/無効を切り替える画像

答えて

関連する問題