Come posso disabilitare le opzioni di selezione di base sui dati JSON ottenuti da AJAX?

Question

Ho un menu a discesa con un paio di opzioni. Voglio scorrerli e puntare l'attributo disabled su alcuni di essi basano il suo risultato sulla chiamata Ajax.

questo quello che sto cercando di realizzare.

---

Campione del referto dati

s-00591 | true 
s-00592 | false 
s-00593 | false 
s-00594 | false 
s-00595 | false 

---

HTML

<select class="rn-dropdown" id="rn-dd"> 
    <option value="class-view">class view</option> 
    <!-- Students Populate Here --> 
    <option value="s-00591">Student S00591</option> 
    <option value="s-00592">Student S00592</option> 
    <option value="s-00593">Student S00593</option> 
    <option value="s-00594">Student S00594</option> 
    <option value="s-00595">Student S00595</option> 
</select> 

---

JS

success: function(reportable) { 



    $.each(reportable , function(i, v) { 

     var userId = v.userId; 
     var reportable = v.reportable; 
     var currentVal = userId; 

     console.log('start'); 
     console.log(userId + " | " +reportable); 
     $('#rn-dd option[value="' + currentVal + '"]').prop('disabled', true); 
     console.log('end'); 

    }); 



} 

---

Risultato,

ho ottenuto alcun errore la visualizzazione della console. Ma continuo a vedere il mio menu a discesa non è disattivato come voglio loro.

Eventuali suggerimenti/aiuta/suggerimenti significherà molto per me.

Answer 1

1. .prop('disabled', true); credo proprio un errore di battitura o qualcosa, in quanto disabilita tutte le opzioni.

2. Il valore true, false in jsonObj può essere String. Quindi, a prescindere dal valore 'true' o 'false', il valore è true, quindi !reportable è sempre falso, il che significa che non disabiliterà alcuna opzione.

Potrebbe essere necessario verificare se la sua una stringa prima, come:

reportable = (typeof v.reportable === 'string') ? v.reportable === 'true' : v.reportable 

per convertirlo in Boolean prima.

var reportable = [ 
 
    {userId: 's-00591', reportable: 'true'}, 
 
    {userId: 's-00592', reportable: 'false'}, 
 
    {userId: 's-00593', reportable: 'false'}, 
 
    {userId: 's-00594', reportable: 'false'}, 
 
    {userId: 's-00595', reportable: 'false'} 
 
]; 
 

 
// Check the diff between string and boolean. 
 
var reportable2 = [ 
 
    {userId: 's-00591', reportable: true}, 
 
    {userId: 's-00592', reportable: false}, 
 
    {userId: 's-00593', reportable: false}, 
 
    {userId: 's-00594', reportable: false}, 
 
    {userId: 's-00595', reportable: false} 
 
]; 
 

 

 

 
$.each(reportable , function(i, v) { 
 
    var userId = v.userId; 
 
    var reportable = v.reportable; 
 
    var currentVal = userId; 
 

 
    console.log('start'); 
 
    console.log(userId + " | " +reportable); 
 
    $('#rn-dd option[value="' + currentVal + '"]').prop('disabled', !reportable); 
 
    console.log('end'); 
 

 
}); 
 

 
$.each(reportable2 , function(i, v) { 
 
    var userId = v.userId; 
 
    var reportable = v.reportable; 
 
    var currentVal = userId; 
 

 
    console.log('start'); 
 
    console.log(userId + " | " +reportable); 
 
    $('#rn-dd2 option[value="' + currentVal + '"]').prop('disabled', !reportable); 
 
    console.log('end'); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<select class="rn-dropdown" id="rn-dd"> 
 
    <option value="class-view">class view</option> 
 
    <!-- Students Populate Here --> 
 
    <option value="s-00591">Student S00591</option> 
 
    <option value="s-00592">Student S00592</option> 
 
    <option value="s-00593">Student S00593</option> 
 
    <option value="s-00594">Student S00594</option> 
 
    <option value="s-00595">Student S00595</option> 
 
</select> 
 

 
<select class="rn-dropdown" id="rn-dd2"> 
 
    <option value="class-view">class view</option> 
 
    <!-- Students Populate Here --> 
 
    <option value="s-00591">Student S00591</option> 
 
    <option value="s-00592">Student S00592</option> 
 
    <option value="s-00593">Student S00593</option> 
 
    <option value="s-00594">Student S00594</option> 
 
    <option value="s-00595">Student S00595</option> 
 
</select>

Answer 2

Non sono sicuro, ma penso che dovresti controllare il valore di currentVal nel tuo codice, è dare un valore come s-00591 oppure no, perché se ottieni un valore errato non disattiva l'opzione desiderata.

e provare .prop('disabled','disabled')

Answer 3

La cosa fondamentale che si sta cercando dovrebbe funzionare se si passa il valore necessario, invece di vero per prop('disabled', true), basta non utilizzare quello che sai.

Ecco un esempio di base, scartando AJAX e altre cose estranee al nucleo della tua domanda:

Codice:

var users = [ 
 
    {userId: 's-00591', reportable: true}, 
 
    {userId: 's-00592', reportable: false}, 
 
    {userId: 's-00593', reportable: false}, 
 
    {userId: 's-00594', reportable: false}, 
 
    {userId: 's-00595', reportable: false}, 
 
]; 
 

 
$.each(users , function(index, user) { 
 
    $('#rn-dd option[value="' + user.userId + '"]').prop('disabled', !user.reportable); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
    <meta charset="utf-8"> 
 
</head> 
 
<body> 
 
<select class="rn-dropdown" id="rn-dd"> 
 
    <option value="class-view">class view</option> 
 
    <!-- Students Populate Here --> 
 
    <option value="s-00591">Student S00591</option> 
 
    <option value="s-00592">Student S00592</option> 
 
    <option value="s-00593">Student S00593</option> 
 
    <option value="s-00594">Student S00594</option> 
 
    <option value="s-00595">Student S00595</option> 
 
</select> 
 
</body> 
 
</html>