注文前に製品の形状をカスタマイズできるサイトを構築しています。
最終的に、いくつかのボタンが 4 つのテキスト ボックスにバインドされます。ユーザーがテキスト ボックスに高い値を入力すると、アクティブ化されたボタンが変化し、この顧客の設計に注文する必要がある材料シートのサイズがわかります。
テキストボックスに配置された値に基づいて有効/無効になるボタンを作成するにはどうすればよいですか?
注文前に製品の形状をカスタマイズできるサイトを構築しています。
最終的に、いくつかのボタンが 4 つのテキスト ボックスにバインドされます。ユーザーがテキスト ボックスに高い値を入力すると、アクティブ化されたボタンが変化し、この顧客の設計に注文する必要がある材料シートのサイズがわかります。
テキストボックスに配置された値に基づいて有効/無効になるボタンを作成するにはどうすればよいですか?
jQueryを使用して、次のようなことを試すことができます。
まず、ボタンに属性disabled="disabled"
を付けてから、次のようにします。
//Assuming they are typing, if it's a dropdown/select, see below
$('#input-id').on('keyup', function() {
if($(this).val() >= 10 && $(this).val() <= 20) { // If the value is between 10 and 20...
$('#button-id').removeAttr('disabled'); // Remove disabled attribute
} else { // If the value is not our keyword...
if(!$('#button-id').attr('disabled')) { // And the button is not disabled...
$('#button-id').attr('disabled', 'disabled'); // Readd disabled attribute
}
}
});
ドロップダウンまたは選択ボックスを使用している場合は、を使用します$("select option:selected")
。