更改输入的类型

Question

I want to change the type of an input on click of a button but it doesn't work. I tried this:

$('.addPhoto').click(function(){
 $(this).siblings('.auto_image').prop("type", "file");
});

It doesn't do anything at all. I searched on google and came across this: change type of input field with jQuery

It says it is possible to do it with straight DOM, but how would I select the class of a sibling with DOM?

Answer 1

You can replace the element all together but I don't think you can just change the type attribute see my example.

$('.addPhoto').on("click",function(){
    $(this).off("click").replaceWith("<input type='file' class='addPhoto'/>");
});

or

$('.addPhoto').one("click",function(){
    $(this).replaceWith("<input type='file' class='addPhoto'/>");
});

http://jsfiddle.net/ECzP4/

here is the jQuery documentation for replaceWith() http://api.jquery.com/replaceWith/

Answer 2

To get the dom object just take the first item from your jQuery collection:

var domObject = $(this).siblings('.auto_image')[0]

Although it doesn't seem to be able to change from text to file - http://jsfiddle.net/7HTgA/

So what I would recommend is having two inputs, and show/hide them as required rather than trying to change the type of a single input.

Answer 3

使用类型为file的auto_image类添加其所有兄弟。

$(this).siblings('.auto_image').attr('type','file')