在更改时取消选择并选择jQuery单选按钮

时间:2014-01-13 16:14:16

标签: jquery html

我有一个页面,我有一堆单选按钮,踢这些单选按钮会导致最近的文本输入变成文件输入,以防他们有他们想要上传的图像。

我的问题是,如果他们决定不想拥有图片我希望他们能够取消选择该单选按钮并执行一些功能将该文件更改回文本输入。

我的html看起来像这样,除了我有更多<tr>然后这个。我只是不想在这里转储一堆代码。

<table>
  <tbody>
    <tr id="1">
      <td>Correction 1</td>
      <td><input type="number" name="page1"  class="form-control" min="1" max="10000"></td>
      <td><input type="number" name="pargraph1"  class="form-control" min="1" max="100000"></td>
      <td><input type="number" name="line1"  class="form-control" min="1" max="100000"></td>
      <td><p><input type="radio" name="add_image1" class="imageInput" value="" /> Adding</p>
        <p><input type="radio" name="add_image1" class="imageInput" value="" /> Replacing</p>
      </td>
      <td class="hidden-480"><input type="text" name="incorrect1" value="" class="form-control" /></td>
      <td class="hidden-480 correct"><input type="text" name="correct1" value="" class="form-control" /></td>
      <td><input class="btn-small btn btn-success" type="submit" name="" value="Done" /></td>
    </tr>
  </tbody>
</table>

我的查询目前看起来像这样。

$('.correctionList').on('change', '.imageInput', function() {

   if($('.imageInput').is(':checked')) { 
        $(this).closest($('tr')).find('.correct').html('<input type="file" name="correct'+num+'" value="" class="form-control" /></td>');
        $(this).addClass('selected');
        $(this).prop('checked', true);
    }

    if($('.imageInput').hasClass('selected') && $('.imageInput').is(':checked')){
                    $(this).closest($('tr')).find('.correct').html('<input type="text" name="correct'+num+'" value="" class="form-control" /></td>');
        $(this).removeClass('selected');
        $(this).prop('checked', false);
    }
});

我知道我在这里正确的方向,但也许我没有正确地取消选择单选按钮。任何帮助都是极好的。

这是一个jsFiddle,可以显示正在发生的事情。 http://jsfiddle.net/pPE9W/

1 个答案:

答案 0 :(得分:2)

这有点难看,但它有效:

$(document).on('mousedown', 'input[type=radio]:checked', function() {
    var that = $(this);
    setTimeout(function() {
        $(that).prop('checked', false);
    }, 150);
});

http://jsfiddle.net/isherwood/pPE9W/1/

相关问题