jQueryは、動的にアクティブおよび無効にされたボタン要素を設定します

Question

私は現在、jQueryを使用してクライアントサイドスクリプトを作成しています。

私は1つの入力フィールドにテキストを入力または削除すると、無効または有効のボタン要素を設定することができます。

しかし、2つの入力フィールドに値があるかどうかを確認する必要があります。それ以外の場合は、ボタンを無効にする必要があります。けれども、私は1つの入力フィールドにテキストを入れた場合、ボタンが常に有効になってます...

Htmlの

<button type="button" id="btnSave">Save</button> 
<button type="button" id="btnSubmit">Save</button> 

<input type="text" id="BusinessLineIdList" /> 
<input type="text" id="Label" /> 

JS

$("#BusinessLineIdList").on("keyup", function() { 
    checkBusinessLine(); 
    checkLabel(); 
}); 

$("#Label").on("keyup", function() { 
    checkLabel(); 
    checkBusinessLine(); 
}); 

function checkLabel() { 
    if ($("#Label").val()) { 
     setBtnActive(); 
    } else { 
     setBtnDisabled() 
    }; 
} 

function checkBusinessLine() { 
    if ($("#BusinessLineId").val()) { 
     setBtnActive(); 
    } 
    else { 
     setBtnDisabled(); 
    } 
} 

function setBtnActive() { 
    $("#btnSave").removeAttr("disabled"); 
    $("#btnSubmit").removeAttr("disabled"); 
}; 

function setBtnDisabled() { 
    $("#btnSave").attr('disabled', true); 
    $("#btnSubmit").attr('disabled', true); 
}; 

あなたは、この問題を解決するためにどのようなアイデアを持っていますか？ おかげ

Answer 1

は毎回1は、それらの両方をチェックし、その結果に応じて行動する、変更されています：

$("#BusinessLineIdList").on("keyup", callback); 
$("#Label").on("keyup", callback); 

function callback() { 
    if (isLabelHasValue() && isBusinessLineHasValue()) { 
     setBtnActive(); 
    } else { 
     setBtnDisabled(); 
    } 
} 

function isLabelHasValue() { 
    return $("#Label").val() && $("#Label").val().length > 0; 
} 

function isBusinessLineHasValue() { 
    return $("#BusinessLineId").val() && $("#BusinessLineId").val().length > 0; 
} 

function setBtnActive() { 
    $("#btnSave").removeAttr("disabled"); 
    $("#btnSubmit").removeAttr("disabled"); 
}; 

function setBtnDisabled() { 
    $("#btnSave").attr('disabled', true); 
    $("#btnSubmit").attr('disabled', true); 
}; 

Answer 2

私はこのようにそれを行うだろう。ボタンを有効/無効にする前に、両方のテキストボックスの値を確認する必要があります。相続人は私が変更作業フィドルhttps://jsfiddle.net/71up0zfm/

jqueryのコード：

$("#BusinessLineIdList").on("keyup", function() { 
var x=checkBusinessLine(); 
var y=checkLabel(); 
if(x&&y) 
setBtnActive(); 
else 
setBtnDisabled(); 
}); 

$("#Label").on("keyup", function() { 
var x=checkLabel(); 
var y=checkBusinessLine(); 
if(x&&y) 
setBtnActive(); 
else 
setBtnDisabled(); 

}); 

function checkLabel() { 
var state=false; 
if ($("#Label").val()) { 
    state=true; 
} 
return state; 
} 

function checkBusinessLine() { 
var state=false; 
if ($("#BusinessLineIdList").val()) { 
    state=true; 
} 
return state; 
}