如何使用包含提交按钮的图像替换单选按钮

时间:2016-03-05 17:25:11

标签: javascript jquery css

我只是试图用图像替换我的单选按钮并包含一个提交按钮。不幸的是,我的提交按钮被取消激活,我的单选按钮不会一直检查。这可以解决吗?

Jquery的:

<script type="text/javascript">
$(document).ready(function(){
     $("img[id='img2']").css({"display": "none"});
     $("img[id='img4']").css({"display": "none"});
     $("img[id='img6']").css({"display": "none"});


    $("img[id=img1]").click(function(){
        $("img[id='img2']").show().css({"display": "block"});
        $(this).prev().attr('checked',true);
        $("img[id='img4']").hide();
        $("img[id='img6']").hide();


    });
    $("img[id='img3']").click(function(){
        $("img[id='img4']").show().css({"display": "block"});
        $(this).prev().attr('checked',true);
        $("img[id='img2']").hide();
        $("img[id='img6']").hide();

    });
   $("img[id='img5']").click(function(){
        $("img[id='img6']").show().css({"display": "block"});
        $(this).prev().attr('checked',true);
        $("img[id='img2']").hide();
        $("img[id='img4']").hide();

    });


  });

</script>

CSS:

 <form class="form-horizontal" method="POST" id="subscribeForm" action="{{URL::route('star-update')}}">

        <input type="radio"  value="1.0" name="imagename" style="display:none"><img id="img1" src="boxone.png">
        <img id="img2" src="picone.png" style="position:absolute">

        <input type="radio" value="1.5" name="imagename" style="display:none"><img id="img3" src="boxtwo.png">
       <img id="img4" src="pictwo.png" style="position:absolute">

        <input type="radio" value="2" name="imagename" style="display:none"> <img id="img5" src="boxthree.png">
       <img id="img6" src="picthree.png" style="position:absolute">

{{Form::token()}} 
    <br>
  <input name="submit" type="submit"  value="submit">
   </form>

1 个答案:

答案 0 :(得分:0)

在您的输入上尝试compile 'com.android.support:appcompat-v7:23.2.0' compile 'com.android.support:cardview-v7:23.2.0' compile 'com.android.support:recyclerview-v7:23.2.0' ,而不是通过CSS(type="hidden")隐藏它们。

通过CSS隐藏输入基本上会禁用表单。