Bootstrap Multiselect：Noneを選択した場合、バックグラウンドの色を変更する方法

WebフォームにBootstrap Multiselectを使用しました。すべての入力/選択フィールドで検証を行いました。その後、すべての空のフィールドがred.Itにbackgroung色を変更するすべての入力に見えると私はcolor.Hereのみ複数選択のためのコードの一部であり、変更していない複数選択する選択fine.However作品を選択します。Bootstrap Multiselect：Noneを選択した場合、バックグラウンドの色を変更する方法

if($("#example-optionClass").val() == null){ 
 
    $("#example-optionClass").css('background-color','red'); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <title>Bootstrap Example</title> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
     <!-- Include the plugin's CSS and JS: --> 
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/> 
 
     <script type="text/javascript"> 
 
      $(document).ready(function() { 
 
       $('#example-optionClass').multiselect({ 
 
        optionClass: function (element) { 
 
         var value = $(element).val(); 
 

 
         if (value % 2 == 0) { 
 
          return 'even'; 
 
         } 
 
         else { 
 
          return 'odd'; 
 
         } 
 
        } 
 
       }); 
 
      }); 
 
     </script> 
 
     <style type="text/css"> 
 
      #example-optionClass-container .multiselect-container li.odd { 
 
       background: #eeeeee; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 

 
     <div class="container"> 
 
      <h2>Bootstrap Multiselect Test</h2> 
 
      <p>I want to change the Multiselect <b>background color</b> If 'None Selected'</p>    
 
      <div id="example-optionClass-container"> 
 
       <select id="example-optionClass" multiple="multiple"> 
 
        <option value="1">Option 1</option> 
 
        <option value="2">Option 2</option> 
 
        <option value="3">Option 3</option> 
 
        <option value="4">Option 4</option> 
 
        <option value="5">Option 5</option> 
 
        <option value="6">Option 6</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 

 
    </body> 
 
</html>

私はそれを書くためにどのような簡単なjqueryが必要ですか？助けてください。おかげ

出典

2016-11-07 user5005768

function onchange_multi(){ 
 
    setTimeout(function(){ // use timeout because master script run and your script run 
 
    var btn_def = $("#example-optionClass-container").find('.btn-default'); 
 
    if($("#example-optionClass").val() === null){ 
 
     btn_def.addClass('btn-danger') //btn-danger default class of bootstrap 
 
    }else{ 
 
     btn_def.removeClass('btn-danger') 
 
    } 
 
    },50); 
 
} 
 

 

 
//onload 
 
onchange_multi(); 
 

 
//onchange 
 
$('#example-optionClass').on('change',function(){ 
 
    onchange_multi(); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <!-- Include the plugin's CSS and JS: --> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/> 
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $('#example-optionClass').multiselect({ 
 
      
 
      optionClass: function(element) { 
 
       var value = $(element).val(); 
 
    
 
       if (value%2 == 0) { 
 
        return 'even'; 
 
       } 
 
       else { 
 
        return 'odd'; 
 
       } 
 
      } 
 
     }); 
 
    }); 
 
</script> 
 
<style type="text/css"> 
 
    #example-optionClass-container .multiselect-container li.odd { 
 
     background: #eeeeee; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Bootstrap Multiselect Test</h2> 
 
    <p>I want to change the Multiselect <b>background color</b> If 'None Selected'</p>    
 
    <div id="example-optionClass-container"> 
 
    <select id="example-optionClass" multiple="multiple"> 
 
     <option value="1">Option 1</option> 
 
     <option value="2">Option 2</option> 
 
     <option value="3">Option 3</option> 
 
     <option value="4">Option 4</option> 
 
     <option value="5">Option 5</option> 
 
     <option value="6">Option 6</option> 
 
    </select> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

出典

2016-11-07 08:26:44

Bootstrap Multiselect：Noneを選択した場合、バックグラウンドの色を変更する方法

答えて

関連する問題