Как ограничить автоматический список с помощью JQuery в кнопке включения или выключения

Если мы нажмем любой номер в текстовом поле имени, отобразится список. Но этот автоматический список должен отображаться только тогда, когда кнопка поиска включена, иначе мы должны ввести вручную. Как я могу сделать это в JQuery?Как ограничить автоматический список с помощью JQuery в кнопке включения или выключения

<!DOCTYPE> 
<html> 
<head> 
<style> 

.onoffswitch { 
    position: relative; width: 63px; 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
} 
.onoffswitch-checkbox { 
    display: none; 
} 
.onoffswitch-label { 
    display: block; overflow: hidden; cursor: pointer; 
    border: 2px solid #999999; border-radius: 20px; 
} 
.onoffswitch-inner { 
    display: block; width: 200%; margin-left: -100%; 
    transition: margin 0.3s ease-in 0s; 
} 
.onoffswitch-inner:before, .onoffswitch-inner:after { 
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; 
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
    box-sizing: border-box; 
} 
.onoffswitch-inner:before { 
    content: "ON"; 
    padding-left: 6px; 
    background-color: #85a857; color: #FFFFFF; 
} 
.onoffswitch-inner:after { 
    content: "OFF"; 
    padding-right: 2px; 
    background-color: #EEEEEE; color: #999999; 
    text-align: right; 
} 
.onoffswitch-switch { 
    display: block; 
    width: 30px; 
    margin: 6px; 
    background: #FFFFFF; 
    position: absolute; 
    top: -4px; 
    bottom: 0; 
    right: 26px; 
    border: 2px solid #999999; border-radius: 20px; 
    transition: all 0.3s ease-in 0s; 
} 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
    margin-left: 0; 
} 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
    right: -5px; 
} 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
</head> 
<body> 
<table cellpadding="0" cellspacing="0" style="width: 300px;"> 
        <tr> 
         <td>Name:</td> 
         <td>               
          <input list="product_name" name="item_name"> 
           <datalist id="product_name"> 
           <option value="112-800-00000"> 
           <option value="112-700-00000"> 
           <option value="700-800-00000"> 
           <option value="100-800-00000"> 
           <option value="900-800-00000"> 
           <option value="600-800-00000"> 
           <option value="08000BK07045"> 
           <option value="08000BK04045"> 
           <option value="08000BK06045"> 
           </datalist> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="2"> 
          <div class=""> 
           <div> Search </div> 
           <div class="onoffswitch dispinline "> 
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
            <label class="onoffswitch-label" for="myonoffswitch"> 
             <span class="onoffswitch-inner"></span> 
             <span class="onoffswitch-switch"></span> 
            </label> 
           </div> 
          </div> 
         </td> 
        </tr> 
        <tr><td style="height: 10px;"></td></tr> 
        <tr> 
         <td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td> 
        </tr> 
        <tr><td style="height: 10px;"></td></tr> 

       </table> 
</body> 
</html>

источник

2017-02-23 Nancy

Я думаю, что вы должны игнорировать DataList по проверке выключателя, нарушая только связь между ними, который является идентификатором, например:

$(document).ready(function(){ 
    $('#myonoffswitch').change(function(){ 
    if($(this).is(':checked')) 
     $('#mylist').next('datalist').attr('id','product_name'); 
    else 
     $('#mylist').next('datalist').attr('id','product_name1'); 
    }); 
});

, имея идентификатор поля поиска в MyList для выбора

<input list="product_name" name="item_name" id="mylist">

полный рабочий фрагмент кода:

$(document).ready(function(){ 
 
    $('#myonoffswitch').change(function(){ 
 
    if($(this).is(':checked')) 
 
     $('#mylist').next('datalist').attr('id','product_name'); 
 
    else 
 
     $('#mylist').next('datalist').attr('id','product_name1'); 
 
    }); 
 
});

<!DOCTYPE> 
 
<html> 
 
<head> 
 
<style> 
 

 
.onoffswitch { 
 
    position: relative; width: 63px; 
 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
 
} 
 
.onoffswitch-checkbox { 
 
    display: none; 
 
} 
 
.onoffswitch-label { 
 
    display: block; overflow: hidden; cursor: pointer; 
 
    border: 2px solid #999999; border-radius: 20px; 
 
} 
 
.onoffswitch-inner { 
 
    display: block; width: 200%; margin-left: -100%; 
 
    transition: margin 0.3s ease-in 0s; 
 
} 
 
.onoffswitch-inner:before, .onoffswitch-inner:after { 
 
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; 
 
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 
.onoffswitch-inner:before { 
 
    content: "ON"; 
 
    padding-left: 6px; 
 
    background-color: #85a857; color: #FFFFFF; 
 
} 
 
.onoffswitch-inner:after { 
 
    content: "OFF"; 
 
    padding-right: 2px; 
 
    background-color: #EEEEEE; color: #999999; 
 
    text-align: right; 
 
} 
 
.onoffswitch-switch { 
 
    display: block; 
 
    width: 30px; 
 
    margin: 6px; 
 
    background: #FFFFFF; 
 
    position: absolute; 
 
    top: -4px; 
 
    bottom: 0; 
 
    right: 26px; 
 
    border: 2px solid #999999; border-radius: 20px; 
 
    transition: all 0.3s ease-in 0s; 
 
} 
 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
 
    margin-left: 0; 
 
} 
 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
 
    right: -5px; 
 
} 
 
</style> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
 
</head> 
 
<body> 
 
<table cellpadding="0" cellspacing="0" style="width: 300px;"> 
 
        <tr> 
 
         <td>Name:</td> 
 
         <td>               
 
          <input list="product_name" name="item_name" id="mylist"> 
 
           <datalist id="product_name"> 
 
           <option value="112-800-00000">112-800-00000</option> 
 
           <option value="112-700-00000">112-700-00000</option> 
 
           <option value="700-800-00000">700-800-00000</option> 
 
           <option value="100-800-00000">100-800-00000</option> 
 
           <option value="900-800-00000">900-800-00000</option> 
 
           <option value="600-800-00000">600-800-00000</option> 
 
           <option value="08000BK07045">08000BK07045</option> 
 
           <option value="08000BK04045">08000BK04045</option> 
 
           <option value="08000BK06045">08000BK06045</option> 
 
           </datalist> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td colspan="2"> 
 
          <div class=""> 
 
           <div> Search </div> 
 
           <div class="onoffswitch dispinline "> 
 
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
 
            <label class="onoffswitch-label" for="myonoffswitch"> 
 
             <span class="onoffswitch-inner"></span> 
 
             <span class="onoffswitch-switch"></span> 
 
            </label> 
 
           </div> 
 
          </div> 
 
         </td> 
 
        </tr> 
 
        <tr><td style="height: 10px;"></td></tr> 
 
        <tr> 
 
         <td colspan="2"><input type="submit" value="Add Item to Cart" name="add_item_to_cart"></td> 
 
        </tr> 
 
        <tr><td style="height: 10px;"></td></tr> 
 

 
       </table> 
 
</body> 
 
</html>

источник

2017-02-23 07:54:41 CME64

Как ограничить автоматический список с помощью JQuery в кнопке включения или выключения

ответ

Смежные вопросы