Question

我只是个初学者。是否有代码使用两个不同的图像作为禁用和启用按钮。大多数示例使用两个单独的按钮，但我需要使用一个带有两个图像的按钮：一个用于关闭，另一个用于打开。

    $(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>

Answer 1

使用包含两个按钮图像的图像精灵。使用background-position设置要显示的图像部分。

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

交换图像以启用/禁用DIV

1 个答案: