L'application k-état-désactivé classe à des saisies de texte - Kendo UI

Voici mon jsfiddle démo.

    <div id="example" class="k-content">
        <div class="demo-section">
            <p>
                <label for="products">Products:</label><input id="products" disabled="disabled" style="width: 300px" />
            </p>

            <p>
                <label>Text:</label><input id="textboxtest" type="text" class="k-textbox" disabled="disabled" value="test" style="width: 300px" />
            </p>
        </div>
    </div>
<script>
$(document).ready(function() {
    var products = $("#products").kendoComboBox({
        cascadeFrom: "categories",
        filter: "contains",
        placeholder: "Select product...",
        dataTextField: "ProductName",
        dataValueField: "ProductID",
        dataSource: {
            data: [{"ProductName": "ProductName1", "ProductID": "1"}, {"ProductName": "ProductName2", "ProductID": "2"}]
        },
        index: 0
    }).data("kendoComboBox");
});
</script>

Comme vous le voyez, les handicapés de la saisie de texte est visuellement différent de la kendoComboBox widget. Est-il possible d'ajouter ou de supprimer des k-état-désactivé classe à des saisies de texte lorsque l'état désactivé changements dans la portée de l'application? Je veux avoir le même comportement que les widgets pour mon texte sur les intrants.

OriginalL'auteur anilca | 2013-12-10

  1. 22

    Je pense que le plus simple et le plus portable façon de le faire est par ajout /suppression de k-state-disabled lorsque vous définissez la disabled la valeur de la propriété.

    Exemple pour vous permettre de zone de texte:

    $("#textboxtest").prop("disabled", false).removeClass("k-state-disabled");

    pour le désactiver:

    $("#textboxtest").prop("disabled", true).addClass("k-state-disabled");

    Votre JSFiddle modifié avec deux boutons pour activer /désactiver http://jsfiddle.net/KrW6f/5/

    Edit: une Autre possibilité est de définir le champ comme un autocomplete sans dataSource. Alors vous en fait pas besoin de définir une classe CSS. Votre champ de saisie de la définition serait la suivante:

    <input id="textboxtest" data-role="autocomplete" type="text" disabled="disabled" value="test" style="width: 300px" />

    Et vous pouvez le voir dans cette autre JSFiddle: http://jsfiddle.net/OnaBai/94HDF/2/

    Mais je dois appeler ce morceau de code, après tous les possibles changements d'états des zones de texte. Et une partie de mes zones de texte sont en train de charger dynamiquement par des appels ajax.
    Comment avez-vous basculer l'activer/le désactiver? Est de le faire dans la même ligne de code...
    Voici un exemple jsfiddle.net/94HDF
    Est-ce acceptable pour vous jsfiddle.net/OnaBai/94HDF/1? Je sais qu'il nécessite deux instructions, mais vous n'êtes pas l'ajout de beaucoup la logique du code.
    Oui @OnaBai vous avez raison. Je sais que ce bout de code fonctionne très bien mais je suis à la recherche d'une plus générique façon de le faire. Pensez détaillée de l'interface utilisateur, avec beaucoup de saisies de texte et beaucoup de logique qui déclenche l'activation / la désactivation. De ce fait je ne veux pas ajouter addClass / removeClass lignes pour chaque cas ou appeler une autre fonction de ce but. Peu de temps je veux un texbox qui fonctionne comme la zone de liste déroulante widget. Je me demande si c'est possible à l'aide de kendo ui cadre.

    OriginalL'auteur OnaBai

  2. 0

    Si vous avez besoin de le faire dans le prêt, ça peut aider:

    if ($('#textboxtest').attr('disabled')=='disabled')
    $('#textboxtest').addClass('k-state-disabled');
else
    $('#textboxtest').removeClass('k-state-disabled');
    Mais je dois appeler ce morceau de code, après tous les possibles changements d'états des zones de texte. Et une partie de mes zones de texte sont en train de charger dynamiquement par des appels ajax.
    Comme suite à votre conversation avec @OneBai si vous voulez aller avec des zones de texte, vous pouvez le sélectionner comme ceci ($('.k-textbox').addClass("k-state-disabled")) ou ($('input[type=text]').addClass("k-state-disabled")), de cette façon, vous ne devez pas sélectionner chaque zone de texte par id

    OriginalL'auteur MohQut