jsakamoto

test('initial state of text box is disabled.', function(){
  setupFixture(function(){/*
    <input type='checkbox' id='cb1' name='cb1'
           data-toggle-target='#tb1' value='on'/>
    <input type='text' id='tb1' name='tb1' value=''/>
    */});

  $('#cb1').disabledIfCheckOff();
  Qunit.equal($('#cb1').prop('checked'), false);
  Qunit.equal($('#tb1').prop('disabled'), true);

jsakamoto

function setupFixture(f) {
    var html = Enumerable.from(f.toString().split('\n'))
        .select("$.trim()")
        .skipWhile("$.slice(-2) != '/*'")
        .skip(1)
        .takeWhile("$.slice(0, 2) != '*/'");
    $('#qunit-fixture').html(html.toArray().join(''));
}

jsakamoto

<form method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="file" value="" />
  <input type="submit" name="btn-upload" id="btn-upload"
         value="Upload image..." />
</form>

jsakamoto

<script>
$(function () {
  $("#file").change(function () {
    $(this).closest("form").submit();
  });
});
</script>

jsakamoto

$("#btn-upload").click(function () {
  $("#file").click();
  return false; // must!
});

jsakamoto

<style>
#file {
  display:none;
}
</style>

jsakamoto

<style>
#file {
  height: 300px;
  font-size: 300px;
}
</style>

jsakamoto

<style>
...
#file-field-window {
  overflow:hidden;
}
</style>

<div id="file-field-window">
  <input type="file" name="file" id="file" value="" />
</div>

jsakamoto

<style>
#file {
  ...
  right: 0;
  position: absolute;
}
#file-field-window {
  ...
  position:relative;
}

jsakamoto

<style>
#file {
  ...
  opacity: 0.01;
}
...
</style>

<div id="file-field-window">
  <input type="file"... />