ユーザーがオプションを選択したときにテキスト入力を無効にする

Question

ユーザーが別の選択入力ドロップダウンで値を選択すると、テキスト入力ボックスを無効にしようとしています。基本的には、リストから選択するか、値を入力するか、両方を入力することはできません。

私は現在、任意の効果を持つことしていないようです。このスニペットを、しようとしている：

//If the #chooseOrg select box has a value, we disable the #enterOrg box 
var chosen = $('#chooseOrg').find('select'); 
var enterInput = $('#enterOrg').find('input'); 
if (chosen.val()) { 
    enterInput.prop('disabled', true); 
} 

//On the new listings pages, for producer/org select 
//Disable the text box input if the user selects an org from the list 
$('#chooseOrg').find('select').on('select2-selecting', function() { 
    if ($(this).val()) { 
      enterInput.prop('disabled', true); 
    } 
}); 
//Re-enable the text input if they clear their selection 
$('#chooseOrg').find('select').on('select2-removed', function() { 
    $('#enterOrg').find('input').prop('disabled', false); 
}); 

編集：私は「（検索を使用する必要があり、より良い構文

注更新されたコード：input '）私はプラグインによって生成されたコードにネストされたフィールドとやり取りしているので、フィールド自体に適切なIDを与えることはできません。

誰かが私に欠けているのを見ますか？

Answer 1

まず、$('input')などのコロンなしの入力を選択できます。さらに重要なことは、またはdisabledのようなものを.attr()の代わりに.prop()を使用して設定することです。これらの変更があなたのコードにあります。

//If the #chooseOrg select box has a value, we disable the #enterOrg box 
var chosen = $('#chooseOrg').find('input'); 
var enterInput = $('#enterOrg').find('input'); 
if (chosen.val()) { 
    enterInput.prop('disabled', true); 
} 

//On the new listings pages, for producer/org select 
//Disable the text box input if the user selects an org from the list 
$('#chooseOrg').find('input').on('select2-selecting', function() { 
    if ($(this).val()) { 
     enterInput.prop('disabled', true); 
    } 
}); 
//Re-enable the text input if they clear their selection 
$('#chooseOrg').find('input').on('select2-removed', function() { 
    $('#enterOrg').find('input').prop('disabled', false); 
}); 

Answer 2

これを実証しました。ここでは実用的なソリューションは、次のとおりです。

//Disable the text input box of the selection already has a value 
$('#chooseOrg').ready(function() { 
    var chosen = $(this).find('select').val(); 
    var enterInput = $('#enterOrg').find('input'); 
    if (chosen) { 
     enterInput.attr('disabled', true); 
    } 
}); 
//Disable the text box input if the user selects an org from the list 
$('#chooseOrg').on('select2-selecting', function() { 
    var chosen = $(this).val(); 
    var enterInput = $('#enterOrg').find('input'); 
    if (chosen !== null) { 
     enterInput.attr('disabled', true); 
    } 
}); 
//Re-enable the text box input if they clear their selection 
$('#chooseOrg').on('select2-removed', function() { 
    $('#enterOrg').find('input').removeAttr('disabled'); 
});