2017-04-10 9 views
0

私は以下の機能にelse文を追加しようとしています。単純なif/elseのクリック機能

elseステートメントには、color_updateが非表示になるだけでなく、ボタンがクリックされていないときに無効になるように、次のコードが含まれます。

$("#color_update").prop('disabled', true); 

これは、コード関数である:

JS

function open(elem) { 
    if (document.createEvent) { 
     var e = document.createEvent("MouseEvents"); 
     e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     elem[0].dispatchEvent(e); 
    } else if (element.fireEvent) { 
     elem[0].fireEvent("onmousedown"); 
    } 
} 

$(document).ready(function(){ 

    $('#update').click(function(event){ 
     event.preventDefault(); 
     event.stopImmediatePropagation(); 
     $('#color_update').addClass("show").focus(); 
     open($('#color_update')); 
     $("#color").prop('disabled', true); 

    }); 

CSS

#color_update { 
display: none; 
} 

HTML

<select id="color"> 
     <option value="Red">Red</option> 
     <option value="Green">Green</option> 
     <option value="Blue">Blue</option> 
    </select> 

    <input type="button" id="update" value="Update" /> 

    <select id="color_update"> 
     <option value="Red">Black</option> 
     <option value="Green">Purple</option> 
     <option value="Blue">White</option> 
    </select> 

私をご案内ください。ありがとうございました。

+0

何が欲しいですか? 'color_update'を最初に無効にするには?どのように 'open'関数が問題と関連していますか? – Satpal

+0

'open()'はいつ呼ばれますか?現在、スニペットではどこですか? – Zze

+0

'$( '#update')にelse文を追加したいのですが、click(function(event){'、 'color_update'は開始時から無効になっていて、更新ボタンをクリックした時のみ有効です@Satpal –

答えて

1

私が理解できたところでは、ボタンをクリックすると2つの選択要素の1つを無効にしたいと思います。ここで は基本的に、我々は決定的な要因としてselect要素のいずれかのdisabledプロパティを使用することができ、同じ

ためfiddleある

$("#color_update").prop('disabled', true); // Disable the select box initially 
    $("#color_update").hide(); // Also hide it 

    $('#update').click(function() { 
     if ($('#color_update').prop('disabled') == true) { // We check the 'disabled' property to determine our next step 

     // The button is now disabled, we need to enable it and hide the #color select 
     $("#color_update").prop('disabled', false); 
     $("#color").prop('disabled', true); 

     // We can now show and hide the respective select elements 
     $("#color_update").show(); 
     $("#color").hide(); 
     } else { // We can now handle the other case 
     $("#color_update").prop('disabled', true); 
     $("#color").prop('disabled', false); 

     $("#color_update").hide(); 
     $("#color").show(); 
     } 
    }); 

は、あなたが何か他のもの

EDITが必要な場合は私に知らせてください。 :jsFiddleリンクを更新しました

+0

これは私が '私が探しています。ありがとうございます@MayankRaj –

+0

@ミント、幸せに役立つ。 –

関連する問題