iCheck Enable/Disable Input-File(bootstrap) Button when i check a checkbox

Question

Hello im using iCheck(http://icheck.fronteed.com/) The problem is, when i click the checkbox, input-file button works but appears to be "disabled" but it still in gray color, not in green.

I'm using two events, ifChecked/ifUnchecked.

I tried attr, removeclass, addclass before, using instead of .prop();

<input id="Archivo" name="Archivo" type="file" accept=".pdf,.doc" disabled />

 $("#Archivo").fileinput({
    language: "es",
    browseClass: "btn btn-primary",
    showCaption: true,
    showRemove: false,
    showUpload: false,
    browseLabel: "&nbsp;Buscar",
    allowedFileExtensions: ["pdf", "doc"],
    elErrorContainer: "#divErrorImagen",
    maxFileSize: 122880
}); 


$('input').on('ifChecked', function (event) {
    console.log("Checked OK")
   $('#Archivo').prop("disabled", false);


});
$('input').on('ifUnchecked', function (event) {
    console.log("Unchecked OK")
   $('#Archivo').prop("disabled", true);

});

Answer 1

Try using fileinput plugin disable and enable methods

$(document).ready(function() {
  $("#Archivo").fileinput({
    language: "es",
    browseClass: "btn btn-primary",
    showCaption: true,
    showRemove: false,
    showUpload: false,
    browseLabel: " Buscar",
    allowedFileExtensions: ["pdf", "doc"],
    elErrorContainer: "#divErrorImagen",
    maxFileSize: 122880
  });

  $('#checkbox').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal',
    increaseArea: '20%'
  });

  $('input').on('ifChecked', function(event) {
    console.log("Checked OK")
    $('#Archivo').fileinput('disable');
  });

  $('input').on('ifUnchecked', function(event) {
    console.log("Unchecked OK")
    $('#Archivo').fileinput('enable');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.3/css/fileinput.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.3/js/fileinput.js"></script>

<input id="Archivo" name="Archivo" type="file" accept=".pdf,.doc" disabled />

<input type="checkbox" id="checkbox">

Answer 2

$('input[type=checkbox]').change(function() {
  if ($("#ifChecked").prop('checked')) {
    console.log("Checked OK")
    $('#Archivo').prop("disabled", false);
  } else {
    $('#Archivo').prop("disabled", true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Archivo" name="Archivo" type="file" accept=".pdf,.doc" disabled />
<input type="checkbox" name="ifChecked" id="ifChecked"> I ifChecked<br>